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.
Kategoria pseudoklas | Opis |
---|---|
Pseudoklasy językowe | Pseudoklasy z tej grupy odnoszą się do języka dokumentu oraz kierunku tekstu dokumentu |
Pseudoklasy kombinacji logicznych | Za pomocą pseudoklas z tej grupy można tworzyć selektory imitujące wyrażenia logiczne |
Pseudoklasy lokalizacji | Pseudoklasy z tej grupy odnoszą się do łączy i elementów docelowych łączy w dokumencie |
Pseudoklasy interakcji z użytkownikiem | Pseudoklasy z tej grupy odnoszą się do różnych rodzajów interakcji użytkownika z elementami w dokumencie |
Pseudoklasy stanu prezentacji elementów | Pseudoklasy z tej grupy odnoszą się do elementów na podstawie ich stanu prezentacji |
Pseudoklasy elementów wejściowych | Pseudoklasy z tej grupy odnoszą się do głównie do elementów formularzy |
Pseudoklasy struktury drzewa | Pseudoklasy z tej grupy odnoszą się do elementów według ich miejsca w drzewie dokumentu |
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
Pseudoklasa | Opis |
---|---|
:dir() | Wybiera elementy na podstawie kierunku tekstu |
:lang() | Wybiera elementy w określonym języku |
Pseudoklasy kombinacji logicznych
Pseudoklasa | Opis |
---|---|
:has() | Wybiera element, który jest związany określoną relacją z danym elementem |
:is() | Wybiera każdy element, który pasuje do któregokolwiek z listy selektorów |
:not() | Wybiera każdy element, który nie jest wskazywany przez listę selektorów podaną w nawiasie |
:where() | Wybiera każdy element, który pasuje do któregokolwiek z listy selektorów (tak jak pseudoklasa :is()), ale nie ma wpływu na precyzję selektora |
Pseudoklasy lokalizacji
Pseudoklasa | Opis |
---|---|
:any-link | Wybiera każdy element, który jest łączem |
:link | Wybiera łącza do nieodwiedzonych stron |
:scope | Wybiera elementy, które są punktem odniesienia dla selektorów |
:target | Wybiera element reprezentowany przez identyfikator fragmentu w adresie URL |
:visited | Wybiera łącza do odwiedzonych stron |
Pseudoklasy interakcji z użytkownikiem
Pseudoklasa | Opis |
---|---|
:active | Wybiera aktywne elementy, np. w chwili, gdy użytkownik je klika |
:focus | Wybiera elementy z fokusem, np. elementy formularza gotowe do przyjmowania danych |
:focus-visible | Wybiera elementy wybierane przez pseudoklasę :focus, co do których algorytm przeglądarki uzna, że powinny być wyróżnione |
:focus-within | Wybiera elementy, które mają fokus lub które zawierają inny element mający fokus |
:hover | Wybiera elementy, nad którymi znajduje się kursor |
Pseudoklasy stanu prezentacji elementów
Pseudoklasa | Opis |
---|---|
:fullscreen | Wybiera element, który jest w trybie pełnoekranowy |
:modal | Wybiera element wyświetlany w trybie modalnym |
:picture-in-picture | Wybiera element, który jest w trybie wyświetlania obrazu w obrazie |
Pseudoklasy elementów wejściowych
Pseudoklasa | Opis |
---|---|
:autofill | Wybiera elementy, które zostały automatycznie wypełnione przez przeglądarkę |
:checked | Wybiera zaznaczone pola formularza |
:default | Wybiera elementy domyślne |
:disabled | Wybiera wyłączone elementy input |
:enabled | Wybiera włączone elementy input |
:indeterminate | Wybiera elementy w nieokreślonym stanie |
:in-range | Wybiera elementy input, których wartość mieści się w przedziale wartości określanych przez atrybuty min i max |
:invalid | Wybiera elementy zawierające nieprawidłową treść |
:optional | Wybiera opcjonalne elementy formularza |
:out-of-range | Wybiera elementy input , których wartość nie mieści się w przedziale wartości określanych przez atrybuty min i max |
:placeholder-shown | Wybiera elementy wyświetlające tekst zastępczy |
:read-only | Wybiera elementy, które są tylko do odczytu dla użytkownika |
:read-write | Wybiera elementy, których treść użytkownik może odczytywać i modyfikować |
:required | Wybiera wymagane elementy formularza |
:user-invalid | Wybiera elementy zawierające treść nieprawidłową po interakcji z użytkownikiem |
:valid | Wybiera elementy zawierające prawidłową treść |
Pseudoklasy struktury drzewa
Pseudoklasa | Opis |
---|---|
:empty | Wybiera każdy pusty element |
:first-child | Wybiera każdy element określonego typu, który jest pierwszym dzieckiem swojego rodzica |
:first-of-type | Wybiera każdy element określonego typu, który jest pierwszym elementem tego typu w swoim rodzicu |
:last-child | Wybiera każdy element określonego typu, który jest ostatnim dzieckiem swojego rodzica |
:last-of-type | Wybiera każdy element określonego typu, który jest ostatnim elementem tego typu w swoim rodzicu |
:nth-child() | Wybiera elementy dzieci o określonych numerach z grupy przylegających elementów tego samego typu |
:nth-last-child() | Wybiera elementy dzieci o określonych numerach z grupy przylegających elementów tego samego typu, zaczynając wybieranie od końca |
:nth-last-of-type() | Wybiera elementy dzieci tego samego typu o określonych numerach (nie muszą do siebie przylegać), zaczynając wybieranie od końca |
:nth-of-type() | Wybiera elementy dzieci tego samego typu o określonych numerach (nie muszą do siebie przylegać) |
:only-child | Wybiera każdy element określonego typu, który jest jedynym dzieckiem swojego rodzica |
:only-of-type | Wybiera każdy element określonego typu, który jest jedynym elementem tego typu w jego rodzicu |
:root | Wybiera element główny dokumentu, czyli html w przypadku dokumentów HTML |