9. Pseudoklasy CSS

Pseudoklasa CSS (ang. pseudo-class) to specjalny rodzaj selektora prostego CSS, który umożliwia wybór elementów na podstawie kryteriów, których nie da się określić w odniesieniu do drzewa dokumentu lub do których trudno jest się odnieść za pomocą innych selektorów prostych.

Najczęściej pseudoklasy odnoszą się do pewnych stanów elementów. Na przykład pseudoklasa :hover wybiera element, nad którym obecnie znajduje się kursor, a pseudoklasa :checked wybiera zaznaczone elementy formularza, np. pola wyboru kliknięte przez użytkownika itd.

Istnieją też pseudoklasy ułatwiające wybór elementów na podstawie ich miejsca w drzewie dokumentu, np. pseudoklasa :nth-child pozwala odnieść się do elementu będącego n-tym dzieckiem innego elementu, a także pseudoklasy logiczne, takie jak :not, która wybiera wszystkie elementy, do których nie odnosi się dany selektor, itd.

W dalszej części rozdziału znajduje się bardziej wyczerpujący opis różnych rodzajów pseudoklas CSS. Poniżej natomiast znajduje się ogólny opis ich składni.

Składnia pseudoklas CSS

Składnia pseudoklas jest nieskomplikowana. W najprostszej postaci składa się z dwukropka i nazwy, np. :checked. Ponadto istnieją także pseudoklasy funkcyjne, które mają dodatkowy nawias za nazwą, w którym można wpisać ewentualne argumenty, np.: :nth-child(odd) (między nazwą pseudoklasy i nawiasem nie może być żadnego innego znaku). Podsumowując, wzór składni pseudoklasy wygląda tak:

:nazwa-pseudoklasy
:nazwa-pseudoklasy(parametry)

Przed dwukropkiem można umieścić dowolny selektor CSS niebędący pseudoklasą, np. a[lang=en] albo div. Ten selektor może, ale nie musi, być oddzielony od dwukropka spacją. Na przykład, wszystkie poniższe definicje są poprawne.

a:hover {…}
li :nth-child(odd) {…}
p:first-child {…}
p :first-child {…}

Nie można natomiast rozdzielić dwukropka i nazwy pseudoklasy. Poniższy zapis jest niepoprawny:

p: first-child

W nazwach pseudoklas wielkość liter nie jest rozróżniana, a więc wszystkie poniższe selektory są prawidłowe:

a:HOVER
a:hover
a:HoVeR

Oczywiście lepiej trzymać się zwyczajowego zapisu nazw pseudoklas CSS samymi małymi literami, ale wybór innej formy nie będzie w tym przypadku błędem składni.

Obecnie najnowszą wersją specyfikacji selektorów CSS jest Selectors Level 4. W dokumencie tym zdefiniowano całkiem pokaźny zestaw pseudoklas, ale na razie jest on jeszcze w fazie szkicu roboczego, więc sporo może się w nim zmienić. Poniżej znajduje się opis najważniejszych pseudoklas z tej specyfikacji, które są już obsługiwane przynajmniej przez niektóre przeglądarki (jeśli brakuje jakiegoś opisu, daj nam znać, a go dodamy).

Klasyfikacja pseudoklas

Pseudoklasy CSS dzielą się na kilka kategorii. Poniższa tabela zawiera wykaz najważniejszych grup z krótkimi opisami.

Poniżej znajduje się zwięzły opis pseudoklas należących do poszczególnych kategorii. Kliknij nazwę pseudoklasy, aby przejść do strony zawierającej jej szczegółowy opis.

Pseudoklasy językowe

Pseudoklasy kombinacji logicznych

Pseudoklasy lokalizacji

Pseudoklasy interakcji z użytkownikiem

Pseudoklasy stanu prezentacji elementów

Pseudoklasy elementów wejściowych

Pseudoklasy struktury drzewa