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!