Podręcznik referencyjny pseudo-klas CSS

Pseudoklasy CSS

Pseudoklasy służą do definiowania specjalnych stanów elementów.

Na przykład, można go użyć do:

  • Ustaw style, gdy użytkownik podnosi mysz nad elementem
  • Ustaw różne style dla odwiedzonych i niez odwiedzonych linków
  • Ustaw style, gdy element uzyskuje fokus
  • Ustaw style dla formularzowych elementów ważnych/ważnych/obowiązkowych/opcjonalnych

Poniższa tabela pokazuje różne pseudoklasy w CSS:

Pseudoklasy Przykład Opis przykładu
:active a:active Wybierz aktywny link
:any-link a:anylink Wybierz wszystkie elementy <a> lub <area> z atrybutem href.
:auto-fill input:autofill Wybierz wszystkie <input> elementy z automatycznie wypełnionymi wartościami przez przeglądarkę.
:checked option:checked Dopasuj wszystkie zaznaczone <input> lub <option> elementy.
:default input:default Wybierz domyślny element formularza z grupy powiązanych elementów.
:defined :defined Wybierz wszystkie zdefiniowane elementy (standardowe lub niestandardowe elementy).
:dir() :dir(rtl) Wybierz elementy z określonym kierunkiem tekstu.
:disabled option:disabled Wybierz wszystkie wyłączone elementy, często używane w elementach formularza.
:empty div:empty Wybierz wszystkie elementy bez podelementów (w tym węzłów tekstowych).
:enabled input:enabled Wybierz wszystkie aktywne elementy, często używane w elementach formularza.
:first @page :first Oznacza pierwszą stronę dokumentu do drukowania (wraz z regułą @page).
:first-child p:first-child Wybierz element, który jest pierwszym dzieckiem jego rodzica (w zestawie braci).
:first-of-type li:first-of-type Wybierz pierwszy element określonego typu w zestawie braci.
:focus select:focus Wybierz element, który uzyskał fokus, często używane w elementach formularza.
:focus-visible button:focus-visible Wybierz element, który uzyskał fokus (tylko gdy styl fokusowy jest stosowany poprzez klawiaturę, a nie mysz).
:focus-within form:focus-within Zgoduje się z elementem lub jego potomstwem, które uzyskują fokus.
:fullscreen :fullscreen Wybierz element w trybie pełnoekranowym.
:has() h2:has(+p) Wybierz element <h2>, który jest bezpośrednio po elemencie <p>, i zastosuj styl do <h2>.
:hover a:hover Wybierz element podcieniowany myszą.
:in-range input:in-range Wybierz element <input> z wartością w podanym zakresie.
:indeterminate input:indeterminate Wybierz elementy formularza w stanie niepewnym.
:invalid input:invalid Wybierz niepoprawne elementy formularza.
:is() :is(ul, ol) Wybierz wszystkie elementy <ul> i <ol>.
:lang() p:lang(it) Wybierz element <p> z atrybutem lang równym "it" (włoski).
:last-child li:last-child Wybierz element <li>, który jest ostatnim dzieckiem jego rodzica.
:last-of-type p:last-of-type Wybierz element <p>, który jest ostatnim elementem jego rodzica.
:left @page :left Oznacza wszystkie lewe strony dokumentu do drukowania (wraz z regułą @page).
:link a:link Wybierz wszystkie nieodwiedzone linki.
:modal :modal Wybierz elementy w stanie modalnym.
:not() :not(p) Wybierz wszystkie elementy, które nie są elementami <p>.
:nth-child() p:nth-child(2) Wybierz element <p>, który jest drugim dzieckiem jego rodzica.
:nth-last-child() p:nth-last-child(2) Wybierz element <p>, który jest drugim dzieckiem na końcu jego rodzica.
:nth-last-of-type() p:nth-last-of-type(2) Wybierz element <p>, który jest drugim elementem na końcu jego rodzica.
:nth-of-type() p:nth-of-type(2) Wybierz element <p>, który jest drugim elementem <p> jego rodzica.
:only-child p:only-child Wybierz element <p>, który jest jedynym dzieckiem jego rodzica.
:only-of-type p:only-of-type Wybierz element <p>, który jest jedynym elementem <p> jego rodzica.
:optional textarea:optional Wybierz elementy <input>, <select> lub <textarea> bez atrybutu required.
:out-of-range input:out-of-range Wybierz element <input> z wartością poza określonym zakresem.
:placeholder-shown input:placeholder-shown Wybierz element <input> lub <textarea>, który wyświetla tekst占位符.
:popover-open :popover-open Wybierz elementy w stanie wyświetlania pop-up.
:read-only input:read-only Wybierz elementy wejściowe z atrybutem readonly.
:read-write input:read-write Wybierz edytowalne elementy wejściowe.
:required input:required Wybierz elementy wejściowe z atrybutem required.
:right @page :right Oznacza wszystkie prawe strony dokumentu do druku (używane razem z regułą @page).
:root :root Wybierz element korzenia dokumentu.
:scope :scope Wybierz element jako punkt odniesienia lub zakres dla selektora.
:state() :state() Wybierz element z określonym niestandardowym stanem.
:target :target Wybierz aktywny element docelowy.
:user-invalid :user-invalid Wybierz elementy formularza z wartością niepoprawną (po interakcji użytkownika).
:user-valid :user-valid Wybierz elementy formularza z wartością poprawną (po interakcji użytkownika).
:valid input:valid Wybierz wszystkie elementy wejściowe z wartością
:visited a:visited Wybierz wszystkie odwiedzone linki.
:where() :where(ol, ul) Wybierz wszystkie elementy <ul> i <ol>.