Pseudoklasy

Załóżmy, że masz formularz rejestracji e-maila i chcesz, aby pole formularza z adresem e-mail miało czerwoną obwódkę, jeśli zawiera nieprawidłowy adres e-maila. Jak to zrobić? Możesz użyć pseudoklasy CSS :invalid, która jest jedną z wielu pseudoklas udostępnianych przez przeglądarkę.

Pseudoklasa umożliwia stosowanie stylów na podstawie zmian stanu i czynników zewnętrznych. Oznacza to, że Twoja grafika może reagować na działania użytkownika, np. nieprawidłowy adres e-mail. Te tematy omawiamy w module selektory.

W przeciwieństwie do pseudoelementów, o których więcej dowiesz się w poprzednim module, pseudoklasy odwołują się do konkretnych stanów, w których może się znajdować element, a nie do ogólnego stylizowania części tego elementu.

Stany interaktywne

Te pseudoklasy są stosowane w odpowiedzi na interakcję użytkownika ze stroną.

:hover

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 2.

Source

Jeśli użytkownik ma urządzenie wskazujące, takie jak mysz lub trackpad, i umieści je nad elementem, możesz użyć :hover, aby zastosować style. To przydatny sposób na zasugerowanie, że z elementem można wchodzić w interakcję.

:active

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Ten stan jest aktywowany, gdy użytkownik aktywnie oddziałuje na element (np. klika), zanim go zwolni. Jeśli używasz urządzenia wskazującego, np. myszy, ten stan występuje, gdy kliknięcie jest w trakcie wykonywania i nie zostało jeszcze zwolnione.

:focus, :focus-within:focus-visible

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Jeśli element może zostać zaznaczony (np. <button>), możesz zareagować na ten stan za pomocą pseudoklasy :focus.

Możesz też zareagować, jeśli element podrzędny Twojego elementu zostanie zaznaczony za pomocą :focus-within.

Elementy, które można zaznaczyć, np. przyciski, będą wyświetlać pierścień zaznaczenia, gdy są zaznaczone (nawet po kliknięciu). W takim przypadku deweloper zastosuje ten kod CSS:

button:focus {
    outline: none;
}

Ten kod CSS usuwa domyślny pierścień fokusu przeglądarki, gdy element zostanie zaznaczony. Może to stanowić problem z dostępnością dla użytkowników, którzy poruszają się po stronie za pomocą klawiatury. Jeśli nie ma stylu fokusa, użytkownik nie będzie mógł śledzić, gdzie znajduje się fokus, gdy używa klawisza Tab. Za pomocą :focus-visible możesz wyświetlić styl zaznaczenia, gdy element zostanie zaznaczony za pomocą klawiatury, a zarazem użyć reguły outline: none, aby zapobiec temu, gdy element będzie obsługiwany za pomocą urządzenia wskazującego.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.3.

Source

Pseudoklasa :target wybiera element, który ma atrybuty id pasujące do fragmentu adresu URL. Załóżmy, że masz taki kod HTML:

<article id="content">
    …
</article>

Możesz dołączyć style do tego elementu, jeśli adres URL zawiera #content.

#content:target {
    background: yellow;
}

Jest to przydatne, gdy chcesz wyróżnić obszary, które mogły zostać specjalnie powiązane, na przykład główną treść w witrynie, za pomocą linku pomijania.

Stany historyczne

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Pseudoklasę :link można zastosować do dowolnego elementu <a>, który ma wartość href, która jeszcze nie została odwiedzona.

:visited

Za pomocą pseudoklasy :visited możesz nadać styl linkowi, który użytkownik już odwiedził. Jest to stan przeciwny do :link, ale masz do dyspozycji mniej właściwości CSS ze względów bezpieczeństwa. Możesz nadać styl tylko elementom color, background-color, border-color, outline-color oraz kolorowi elementów SVG fill i stroke.

Zamówienia

Jeśli zdefiniujesz styl :visited, może on zostać zastąpiony pseudoklasą linku o co najmniej takiej samej specyficzności. Dlatego zalecamy użycie reguły LVHA do stylizacji linków z pseudoklasami w określonej kolejności: :link, :visited, :hover, :active.

a:link {}
a:visited {}
a:hover {}
a:active {}

Stany formularza

Te pseudoklasy mogą wybierać elementy formularza w różnych stanach, w których mogą się one znajdować podczas interakcji z użytkownikiem.

:disabled:enabled

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Jeśli element formularza, na przykład <button>, jest wyłączony przez przeglądarkę, możesz skonfigurować to za pomocą pseudoklasy :disabled. Pseudoklasa :enabled jest dostępna w przeciwnym stanie, chociaż elementy formularza są domyślnie ustawione na :enabled, więc możesz nie sięgać po tę pseudoklasę.

:checked:indeterminate

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Pseudoklasa :checked jest dostępna, gdy element pomocniczy formularza, taki jak pole wyboru lub pole opcji, jest zaznaczone.

Stan :checked jest stanem binarnym(prawda lub fałsz), ale pola wyboru mają stan pośredni, gdy nie są ani zaznaczone, ani odznaczone. Jest to stan :indeterminate.

Przykładem takiego stanu jest użycie opcji „Zaznacz wszystko”, która zaznacza wszystkie pola wyboru w grupie. Jeśli użytkownik odznaczy jedno z tych pól wyboru, pole wyboru na poziomie katalogu głównego nie będzie już oznaczać zaznaczenia wszystkich pól, więc powinno zostać ustawione w stanie nieokreślonym.

Element <progress> ma też stan nieokreślony, który można stylizować. Typowym zastosowaniem jest nadanie mu pasków, aby wskazać, że nie wiadomo, ile jeszcze potrzeba.

:placeholder-shown

Browser Support

  • Chrome: 47.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 9.

Source

Jeśli pole formularza ma atrybut placeholder i brak wartości, pseudoklasę :placeholder-shown można użyć do dołączenia stylów do tego stanu. Gdy tylko w polu pojawią się treści (z opcją placeholder lub bez niej), stan ten przestanie obowiązywać.

Stany weryfikacji

Browser Support

  • Chrome: 10.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

Możesz reagować na walidację formularza HTML za pomocą pseudoklas takich jak :valid, :invalid i :in-range. Pseudoklasy :valid:invalid są przydatne w kontekstach takich jak pole adresu e-mail, które zawiera wartość pattern, która musi być dopasowana, aby było to prawidłowe pole. Ten stan prawidłowej wartości może być wyświetlany użytkownikowi, aby poinformować go, że może przejść do następnego pola.

Pseudoklasa :in-range jest dostępna, jeśli dane wejściowe mają minmax, np. dane wejściowe liczbowe i wartość mieści się w tych granicach.

W przypadku formularzy HTML możesz określić, że pole jest wymagane, za pomocą atrybutu required. Klasa pseudo :required będzie dostępna w przypadku wymaganych pól. Pola, które nie są wymagane, można wybrać za pomocą pseudoklasy :optional.

Wybieranie elementów według indeksu, kolejności i występowania

Istnieje grupa pseudoklas, które wybierają elementy na podstawie ich położenia w dokumencie.

:first-child:last-child

Browser Support

  • Chrome: 4.
  • Edge: 12.
  • Firefox: 3.
  • Safari: 3.1.

Source

Jeśli chcesz znaleźć pierwszy lub ostatni element, możesz użyć funkcji :first-child i :last-child. Te pseudoklasy zwracają pierwszy lub ostatni element w grupie elementów siostrzanych.

:only-child

Browser Support

  • Chrome: 2.
  • Edge: 12.
  • Firefox: 1.5.
  • Safari: 3.1.

Source

Możesz też wybrać elementy, które nie mają elementów siostrza, za pomocą pseudoklasy :only-child.

:first-of-type:last-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Możesz wybrać tagi :first-of-type i :last-of-type, które na pierwszy rzut oka wyglądają tak samo jak tagi :first-child i :last-child, ale zwróć uwagę na ten kod HTML:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

I ten kod CSS:

.my-parent div:first-child {
    color: red;
}

Żaden element nie będzie podświetlony na czerwono, ponieważ pierwsze dziecko jest akapitem, a nie elementem div. W tym kontekście przydatna jest pseudoklasa :first-of-type.

.my-parent div:first-of-type {
    color: red;
}

Mimo że pierwszy element <div> jest drugim elementem podrzędnym, nadal jest pierwszym elementem typu wewnątrz elementu .my-parent, więc zgodnie z tą regułą będzie podświetlony na czerwono.

:nth-child:nth-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Nie musisz ograniczać się do pierwszych i ostatnich elementów podrzędnych ani typów. Pseudoklasy :nth-child i :nth-of-type umożliwiają określenie elementu znajdującego się pod określonym indeksem. Indeksowanie w selektorach arkusza CSS zaczyna się od 1.

Do tych pseudoklas możesz też przekazywać więcej niż indeks. Jeśli chcesz zaznaczyć wszystkie parzyste elementy, użyj :nth-child(even).

Możesz też tworzyć bardziej złożone selektory, które znajdują elementy w regularnych odstępach, korzystając z mikroskładni An+B.

li:nth-child(3n+3) {
    background: yellow;
}

Ten selektor zaznacza co trzeci element, zaczynając od elementu 3. Wartość n w tym wyrażeniu to indeks, który zaczyna się od 0. Liczba 3 (3n) wskazuje, ile razy indeks jest mnożony.

Załóżmy, że masz 7 elementów <li>. Pierwszym wybranym elementem jest 3, ponieważ 3n+3 jest tłumaczone na (3 * 0) + 3. Następne iteracje wybiorą element 6, ponieważ n zwiększyło się do 1, czyli (3 * 1) + 3). To wyrażenie działa zarówno w przypadku :nth-child, jak i :nth-of-type.

Możesz wypróbować tego typu selektora na stronie testera nth-child lub za pomocą tego narzędzia do selektora ilości.

:only-of-type

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 3.5.
  • Safari: 3.1.

Source

Ostatnim sposobem jest znalezienie jedynego elementu danego typu w grupie elementów pokrewnych za pomocą :only-of-type. Jest to przydatne, jeśli chcesz wybrać listy z jednym elementem lub jeśli chcesz znaleźć jedyny element pogrubiony w akapicie.

Znajdowanie pustych elementów

Czasami przydatne może być zidentyfikowanie całkowicie pustych elementów. Do tego celu też istnieje pseudoklasa.

:empty

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Jeśli element nie ma elementów potomnych, ma zastosowanie pseudoklasa :empty. Dzieci to nie tylko elementy HTML ani węzły tekstowe: mogą to być też spacje. Może to być mylące, gdy debugujesz ten kod HTML i zastanawiasz się, dlaczego nie działa z :empty:

<div>
</div>

Dzieje się tak, ponieważ między otwierającym a zamykającym <div> jest trochę pustego miejsca, więc pusty nie zadziała.

Pseudoklasa :empty może być przydatna, jeśli masz ograniczoną kontrolę nad kodem HTML i chcesz ukryć puste elementy, takie jak edytor treści WYSIWYG. Tutaj edytor dodał przypadkowy pusty akapit.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

Za pomocą :empty możesz znaleźć i ukryć takie informacje.

.post :empty {
    display: none;
}

Wyszukiwanie i wykluczanie wielu elementów

Niektóre pseudoklasy pomagają pisać bardziej zwarty kod CSS.

:is()

Browser Support

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 78.
  • Safari: 14.

Source

Jeśli chcesz znaleźć wszystkie elementy podrzędne h2, liimg w elemencie .post, możesz napisać listę selektorów w takiej formie:

.post h2,
.post li,
.post img {
    
}

Za pomocą pseudoklasy :is() możesz napisać bardziej zwartą wersję:

.post :is(h2, li, img) {
    
}

Pseudoklasa :is jest nie tylko bardziej zwarta niż lista selektorów, ale też bardziej tolerancyjna. W większości przypadków, jeśli na liście selektorów wystąpi błąd lub nieobsługiwany selektor, cała lista selektorów przestanie działać. Jeśli w przekazanych selektorach w pseudoklasie :is wystąpi błąd, selektor ten zostanie zignorowany, ale zostaną użyte selektory prawidłowe.

:not()

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.1.

Source

Możesz też wykluczać elementy za pomocą pseudoklasy :not(). Możesz na przykład użyć go do nadawania stylu wszystkim linkom, które nie mają atrybutu class.

a:not([class]) {
    color: blue;
}

Pseudoklasa :not może też pomóc w zwiększeniu dostępności. Na przykład element <img> musi mieć element alt, nawet jeśli ma pustą wartość. Możesz więc napisać regułę CSS, która dodaje gruby czerwony kontur do nieprawidłowych obrazów:

img:not([alt]) {
    outline: 10px red;
}

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o pseudoklasach

Pseudoklasy działają tak, jakby klasa została dynamicznie zastosowana do elementu, a pseudoelementy działają na samym elemencie.

Fałsz
Prawda

Które z tych pseudoklas są funkcjonalne?

:target
:empty
:is()
:not()

Które z tych pseudoklas są spowodowane interakcją z użytkownikiem?

:squeeze
:press
:focus-within
:hover
:target

Które z tych pseudoklas stanów <form>

:checked
:indeterminate
:fresh
:loading
:valid
:in-range
:enabled