Aby strony internetowe były często odwiedzane przez internautów muszą być bogate w wartościowe treści i jednocześnie muszą przyciągać odwiedzającego atrakcyjnym wyglądem. Do tego właśnie służą kaskadowe arkusze styli.
Stylowanie elementów polega na odwołaniu się za pomocą selektora do pewnego elementu (lub elementów) i nadaniu jednego lub kilku atrybutów z odpowiednią wartością. Selektory opisane w tym wpisie pozwalają na stylowanie poszczególnych elementów strony internetowej. Ogólny zapis wygląda następująco:
selektor {
atrybut: wartość;
}
Podobnie jak w przypadku znaczników HTML tutaj również nie ma potrzeby ani konieczności uczenia się wszystkiego na pamięć.
We wpisie wyjaśniającym czym jest CSS założyliśmy, że będziemy odwoływać się do elementów poprzez klasy i tego samego sposobu (w miarę możliwości) będziemy używali tutaj.
Podstawowe selektory CSS
Selektor każdego elementu: *
Najłatwiejszy i najpopularniejszy, a jednocześnie najsłabszy i najmniej wydajny selektor CSS. Symbolem * odwołujemy się do wszystkich elementów na stronie internetowej.
* {
margin: 12px;
}
Powyższy zapis sprawi, że każdy element na stronie będzie posiadał marginesy o wartości 12 pikseli.
Selektor jednego elementu
Stylowanie wszystkich elementów o podanej nazwie odbywa się poprzez podanie nazwy tych elementów.
p {
color: red;
}
Powyższy zapis sprawi, że każdy paragraf będzie posiadał czcionkę o czerwonym kolorze.
Selektor identyfikatora: #
Najbardziej jednoznaczny selektor CSS. Symbolem # odwołujemy się do elementu podając wartość jego atrybutu id. Poprawny semantycznie kod HTML zawiera tylko jeden element o podanym identyfikatorze.
#logout {
font-size: 16px;
}
Powyższy zapis sprawi, że element z identyfikatorem logout (id="logout") będzie zapisany czcionką o rozmiarze 16 pikseli.
Selektor klasy: .
Najczęściej używany selektor. Elementy mogą posiadać wiele klas, co w wielu przypadkach może okazać się bardzo pomocne.
.list-item {
font-style: italic;
}
Powyższy zapis sprawi, że elementy posiadające klasę list-item (class="list-item") będą zapisane kursywą.
Selektor potomka: spacja
Chcąc ostylować element znajdujący się gdzieś wewnątrz innego elementu użyjemy selektora potomka, czyli spacji.
.list .list-item {
color: blue;
}
Powyższy zapis sprawi, że niebieskim kolorem zostanie zapisany każdy element posiadający klasę list-item, który jednocześnie znajduje się gdzieś wewnątrz elementu posiadającego klasę list.
Selektor bezpośredniego potomka: >
Istnieje drobna, choć bardzo ważna różnica między selektorem potomka a selektorem bezpośredniego potomka. W przypadku selektora bezpośredniego potomka stylujemy element będący pierwszym potomkiem innego elementu.
.box > .description {
font-size: 16px;
}
Powyższy zapis sprawi, że czcionką o rozmiarze 16 pikseli zostanie zapisany element z klasą description będący pierwszym elementem wewnątrz elementu z klasą box.
Selektor każdego sąsiada: ~
W celu ostylowania wielu elementów występujących bezpośrednio po innym elemencie należy użyć symbolu ~.
.title ~ .paragraph {
color: red;
}
Powyższy zapis sprawi, że czerwonym kolorem zostanie zapisany każdy element posiadający klasę paragraph, który jednocześnie występuje po elemencie posiadającym klasę title.
Selektor bezpośredniego sąsiada: +
Aby ostylować element występujący bezpośrednio po innym elemencie, należy użyć symbolu +.
.list + .description {
font-style: italic;
}
Powyższy zapis sprawi, że kursywą zostanie zapisany tekst w elemencie z klasą description, który znajduje się tuż za elementem z klasą list.
Zaawansowane selektory CSS
Selektor elementu, nad którym znajduje się kursor: :hover
Selektor :hover służy do nadania styli elementowi, nad którym znajduje się kursor.
.my-anchor:hover {
border-bottom: 2px solid green;
}
Powyższy zapis sprawi, że po najechaniu kursorem na element z klasą my-anchor dolna krawędź tego elementu będzie miała szerokość 2 pikseli, będzie ciągła i będzie miała zielony kolor.
Selektor wykluczający: :not()
Do tej pory odwoływaliśmy się do wszystkich elementów spełniających wskazane wymagania. Jeśli jednak chcemy ograniczyć zbiór tych elementów powinniśmy użyć selektora :not().
.feature:not(.new) {
background-color: red;
}
Powyższy zapis sprawi, że czerwone tło będzie posiadał każdy element posiadający klasę feature, ale nieposiadający klasy new.
Selektor pierwszej linii tekstu: ::first-line
Korzystając z kaskadowych arkuszy styli możemy z łatwością ostylować pierwszą linię tekstu.
.text::first-line {
color: green;
}
Powyższy zapis sprawi, że kolorem zielonym zostanie zapisana pierwsza linia tekstu posiadającego klasę text. Uwaga: Przed selektorem ::first-line stawiamy dwa dwukropki.
Selektor pierwszej litery tekstu: ::first-letter
Podobnie jak możemy ostylować pierwszą linię, tak samo możemy ostylować pierwszą literę tekstu.
.text::first-letter {
font-size: 20px;
}
Powyższy zapis sprawi, że rozmiarem 20 pikseli zostanie zapisana pierwsza litera w tekście posiadającym klasę text. Uwaga: Przed selektorem ::first-letter stawiamy dwa dwukropki.
Selektor pierwszego potomka: :first-child
Odwołanie do pierwszego potomka odbywa się za pomocą selektora :first-child.
.list .list-item:first-child {
font-weight: bold;
}
Powyższy zapis sprawi, że pogrubioną czcionką zostanie zapisany pierwszy element posiadający klasę list-item będący wewnątrz elementu posiadającego klasę list.
Selektor ostatniego potomka: :last-child
Odwołanie do ostatniego potomka odbywa się za pomocą selektora :last-child.
.list .list-item:last-child {
font-weight: bold;
}
Powyższy zapis sprawi, że pogrubioną czcionką zostanie zapisany ostatni element posiadający klasę list-item będący wewnątrz elementu posiadającego klasę list.
Selektor n-tego potomka: :nth-child(n)
Odwołanie do n-tego potomka odbywa się za pomocą selektora :nth-child(n), gdzie n to liczba naturalna większa od 0 (numerowanie potomków rozpoczyna się od 1).
.row-with-data:nth-child(3) {
background-color: blue;
}
Powyższy zapis sprawi, że niebieskie tło będzie miał trzeci potomek dowolnego elementu posiadający klasę row-with-data.
Ten selektor pozwoli w szczególności na odwołanie do parzystych potomków pewnej listy.
.users-list .user-row:nth-child(2n) {
background-color: grey;
}
Powyższy zapis sprawi, że wewnątrz elementu posiadającego klasę users-list parzyste (2n) wiersze posiadające klasę user-row będą miały szare tło.
Selektor n-tego od końca potomka: :nth-last-child(n)
Ten selektor działa podobnie do selektora :nth-child(n) z tą różnicą, że za jego pomocą odwołujemy się do n-tego potomka licząc od końca.
.list .item:nth-last-child(2) {
color: red;
}
Powyższy zapis sprawi, że kolorem czerwonym zostanie zapisany obecny wewnątrz elementy posiadającego klasę list przedostatni (2) potomek posiadający klasę item.
Selektor jedynego potomka: :only-child
Za pomocą tego selektora ostylujemy element pod warunkiem, że jest on jedynym potomkiem pewnego elementu.
.details .message:only-child {
color: blue;
}
Powyższy zapis sprawi, że niebieskim kolorem zostanie zapisany element posiadający klasę message, który jest jedynym potomkiem elementu posiadającego klasę details.
Podsumowanie
Używając ze zrozumieniem opisanych powyżej selektorów będziemy mogli z powodzeniem stylować elementy na stronach internetowych. Powodzenia!
