9. Pseudoklasy CSS

> Dodaj do ulubionych

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 pseudoklasOpis
Pseudoklasy j─ÖzykowePseudoklasy z tej grupy odnosz─ů si─Ö do j─Özyka dokumentu oraz kierunku tekstu dokumentu
Pseudoklasy kombinacji logicznychZa pomoc─ů pseudoklas z tej grupy mo┼╝na tworzy─ç selektory imituj─ůce wyra┼╝enia logiczne
Pseudoklasy lokalizacjiPseudoklasy z tej grupy odnosz─ů si─Ö do ┼é─ůczy i element├│w docelowych ┼é─ůczy w dokumencie
Pseudoklasy interakcji z u┼╝ytkownikiemPseudoklasy z tej grupy odnosz─ů si─Ö do r├│┼╝nych rodzaj├│w interakcji u┼╝ytkownika z elementami w dokumencie
Pseudoklasy stanu prezentacji element├│wPseudoklasy z tej grupy odnosz─ů si─Ö do element├│w na podstawie ich stanu prezentacji
Pseudoklasy element├│w wej┼ŤciowychPseudoklasy z tej grupy odnosz─ů si─Ö do g┼é├│wnie do element├│w formularzy
Pseudoklasy struktury drzewaPseudoklasy 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

PseudoklasaOpis
:dir()Wybiera elementy na podstawie kierunku tekstu
:lang()Wybiera elementy w okre┼Ťlonym j─Özyku

Pseudoklasy kombinacji logicznych

PseudoklasaOpis
: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

PseudoklasaOpis
:any-linkWybiera ka┼╝dy element, kt├│ry jest ┼é─ůczem
:linkWybiera ┼é─ůcza do nieodwiedzonych stron
:scopeWybiera elementy, kt├│re s─ů punktem odniesienia dla selektor├│w
:targetWybiera element reprezentowany przez identyfikator fragmentu w adresie URL
:visitedWybiera ┼é─ůcza do odwiedzonych stron

Pseudoklasy interakcji z u┼╝ytkownikiem

PseudoklasaOpis
:activeWybiera aktywne elementy, np. w chwili, gdy u┼╝ytkownik je klika
:focusWybiera elementy z fokusem, np. elementy formularza gotowe do przyjmowania danych
:focus-visibleWybiera elementy wybierane przez pseudoklas─Ö :focus, co do kt├│rych algorytm przegl─ůdarki uzna, ┼╝e powinny by─ç wyr├│┼╝nione
:focus-withinWybiera elementy, kt├│re maj─ů fokus lub kt├│re zawieraj─ů inny element maj─ůcy fokus
:hoverWybiera elementy, nad kt├│rymi znajduje si─Ö kursor

Pseudoklasy stanu prezentacji element├│w

PseudoklasaOpis
:full-screenWybiera element, który jest w trybie pełnoekranowy
:modalWybiera element wy┼Ťwietlany w trybie modalnym
:picture-in-pictureWybiera element, kt├│ry jest w trybie wy┼Ťwietlania obrazu w obrazie

Pseudoklasy element├│w wej┼Ťciowych

PseudoklasaOpis
:autofillWybiera elementy, kt├│re zosta┼éy automatycznie wype┼énione przez przegl─ůdark─Ö
:checkedWybiera zaznaczone pola formularza
:defaultWybiera elementy domy┼Ťlne
:disabledWybiera wy┼é─ůczone elementy input
:enabledWybiera w┼é─ůczone elementy input
:indeterminateWybiera elementy w nieokre┼Ťlonym stanie
:in-rangeWybiera elementy input, kt├│rych warto┼Ť─ç mie┼Ťci si─Ö w przedziale warto┼Ťci okre┼Ťlanych przez atrybuty min i max
:invalidWybiera elementy zawieraj─ůce nieprawid┼éow─ů tre┼Ť─ç
:optionalWybiera opcjonalne elementy formularza
:out-of-rangeWybiera elementy input, kt├│rych warto┼Ť─ç nie mie┼Ťci si─Ö w przedziale warto┼Ťci okre┼Ťlanych przez atrybuty min i max
:placeholder-shownWybiera elementy wy┼Ťwietlaj─ůce tekst zast─Öpczy
:read-onlyWybiera elementy, kt├│re s─ů tylko do odczytu dla u┼╝ytkownika
:read-writeWybiera elementy, kt├│rych tre┼Ť─ç u┼╝ytkownik mo┼╝e odczytywa─ç i modyfikowa─ç
:requiredWybiera wymagane elementy formularza
:user-invalidWybiera elementy zawieraj─ůce tre┼Ť─ç nieprawid┼éow─ů po interakcji z u┼╝ytkownikiem
:validWybiera elementy zawieraj─ůce prawid┼éow─ů tre┼Ť─ç

Pseudoklasy struktury drzewa

PseudoklasaOpis
:emptyWybiera ka┼╝dy pusty element
:first-childWybiera ka┼╝dy element okre┼Ťlonego typu, kt├│ry jest pierwszym dzieckiem swojego rodzica
:first-of-typeWybiera ka┼╝dy element okre┼Ťlonego typu, kt├│ry jest pierwszym elementem tego typu w swoim rodzicu
:last-childWybiera ka┼╝dy element okre┼Ťlonego typu, kt├│ry jest ostatnim dzieckiem swojego rodzica
:last-of-typeWybiera 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-childWybiera ka┼╝dy element okre┼Ťlonego typu, kt├│ry jest jedynym dzieckiem swojego rodzica
:only-of-typeWybiera ka┼╝dy element okre┼Ťlonego typu, kt├│ry jest jedynym elementem tego typu w jego rodzicu
:rootWybiera element główny dokumentu, czyli html w przypadku dokumentów HTML