Pseudoklasy

Podcast o CSS – 015: pseudo-lekcje

Załóżmy, że masz formularz rejestracyjny e-mail i chcesz, by pole formularza miało czerwone obramowanie, jeśli zawiera nieprawidłowy adres e-mail. Jak to zrobić? Możesz użyć pseudoklasy CSS :invalid, która jest jedną z wielu pseudoklas tworzonych w przeglądarce.

Pseudoklasa umożliwia stosowanie stylów na podstawie zmian stanu i czynników zewnętrznych. Oznacza to, że projekt może reagować na dane wprowadzane przez użytkownika, np. nieprawidłowy adres e-mail. Są one opisane w module selektorów, a w tym module dowiesz się z nich więcej.

W przeciwieństwie do pseudoelementów, o których dowiesz się więcej w poprzednim module, pseudoklasy odwołują się do konkretnych stanów, w których może znajdować się element, a nie do określania stylu jego elementów.

Stany interaktywne

Poniższe pseudoklasy mają zastosowanie ze względu na interakcję użytkownika z Twoją stroną.

:hover

Jeśli użytkownik ma urządzenie wskazujące, np. mysz lub trackpad, i umieści go nad elementem, możesz kliknąć ten stan, używając :hover, aby zastosować style. Jest to przydatna metoda sugerowania, że z elementem można wejść w interakcję.

:active

Ten stan pojawia się, gdy następuje interakcja z elementem, np. kliknięcie, przed jego zwolnieniem. W przypadku użycia urządzenia wskazującego, np. myszy, ten stan określa moment rozpoczęcia kliknięcia, ale nie został jeszcze wywołany.

:focus, :focus-within i :focus-visible

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, używając :focus-within.

Wybrane elementy, np. przyciski, będą wyróżniać pierścieniem zaznaczenia, nawet po kliknięciu. W takiej sytuacji deweloper zastosuje taką usługę porównywania cen:

button:focus {
    outline: none;
}

Ten kod CSS usuwa domyślny pierścień zaznaczenia przeglądarki, gdy element jest aktywny, co utrudnia użytkownikom poruszanie się po stronie internetowej za pomocą klawiatury. Jeśli nie wybierzesz stylu zaznaczenia, użycie klawisza tab spowoduje, że użytkownik nie będzie mógł śledzić bieżącego miejsca zaznaczenia. Dzięki :focus-visible możesz zaprezentować styl zaznaczenia, gdy element zostanie zaznaczony za pomocą klawiatury, a jednocześnie użyć reguły outline: none, aby zapobiec interakcji ze wskaźnikiem.

button:focus {
    outline: none;
}

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

:target

Pseudoklasa :target wybiera element, którego parametr id pasuje do fragmentu adresu URL. Załóżmy, że masz taki kod HTML:

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

Jeśli adres URL zawiera ciąg #content, możesz dołączać do niego style.

#content:target {
    background: yellow;
}

Przydaje się to do wyróżniania za pomocą linku pomijania obszarów, do których można Cię bezpośrednio dojechać, np. do głównej treści witryny.

Stany historyczne

:link

Pseudoklasę :link można zastosować do dowolnego elementu <a> z wartością href, który nie został jeszcze odwiedzony.

:visited

Styl linku, który został już odwiedzony przez użytkownika, możesz zmienić za pomocą pseudoklasy :visited. Jest to stan odwrotny do stanu :link, ale ze względów bezpieczeństwa masz mniej właściwości CSS, których chcesz użyć. Możesz stylizować tylko elementy color, background-color, border-color, outline-color oraz kolor SVG fill i stroke.

Kwestie dotyczące kolejności

Jeśli zdefiniujesz styl :visited, możesz go zastąpić pseudoklasą linku o co najmniej takiej samej specyfice. Z tego powodu zalecamy używanie reguły LVHA do określania stylu linków z pseudoklasami w określonej kolejności: :link, :visited, :hover, :active.

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

Stany formularzy

Poniższe pseudoklasy umożliwiają wybieranie elementów formularza w różnych stanach, w których mogą się one znajdować podczas interakcji z nimi.

:disabled i :enabled

Jeśli jakiś element formularza, taki jak <button>, jest wyłączony przez przeglądarkę, możesz przykuć go do tego stanu za pomocą pseudoklasy :disabled. Pseudoklasa :enabled jest dostępna w przypadku stanu odwrotnego, chociaż domyślnie elementy formularza również mają wartość :enabled, dlatego może się zdarzyć, że nie będziesz się docierać do tej pseudoklasy.

:checked i :indeterminate

Pseudoklasa :checked jest dostępna, gdy pomocniczy element formularza, np. pole wyboru lub przycisk, jest zaznaczony.

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

Przykładem może być element sterujący „zaznacz wszystko”, który zaznacza wszystkie pola wyboru w grupie. Gdyby użytkownik odznaczył jedno z tych pól wyboru, pole wyboru głównego nie oznaczałoby już zaznaczonego pola „Wszystkie”, więc powinno zostać oznaczone jako nieokreślone.

Element <progress> też ma stan nieokreślony, na podstawie którego można określić jego styl. Typowym przykładem jest nadanie mu wyglądu w paski, aby pokazać, że nie wiadomo, ile jeszcze zostało potrzebnych.

:placeholder-shown

Jeśli pole formularza ma atrybut placeholder i brak wartości, do dołączania stylów można użyć pseudoklasy :placeholder-shown. Gdy tylko w polu pojawi się treść, niezależnie od tego, czy jest ona oznaczona jako placeholder czy nie, ten stan przestaje obowiązywać.

Stany weryfikacji

Na sprawdzanie poprawności formularza HTML możesz odpowiadać za pomocą pseudoklas, takich jak :valid, :invalid i :in-range. Pseudoklasy :valid i :invalid są przydatne w kontekstach takich jak pole adresu e-mail z wartością pattern, która musi być dopasowana, aby pole było prawidłowe. Ten stan prawidłowej wartości można wyświetlić użytkownikowi, aby wiedział, że może bezpiecznie przejść do następnego pola.

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

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

Wybieranie elementów według indeksu, kolejności i wystąpienia

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

:first-child i :last-child

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

:only-child

Możesz też wybierać elementy, które nie mają elementów równorzędnych, dzięki pseudoklasie :only-child.

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

Możesz wybrać :first-of-type i :last-of-type, które na początku wyglądają tak samo jak :first-child i :last-child, ale spójrz na ten kod HTML:

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

Oraz ta usługa porównywania cen:

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

Żaden element nie miałby koloru na czerwono, ponieważ pierwszy element podrzędny jest akapitem, a nie obiektem div. W tym kontekście przydaje się pseudoklasa :first-of-type.

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

Chociaż pierwszy element <div> jest drugim podrzędnym, nadal jest pierwszym typem w elemencie .my-parent, więc w przypadku tej reguły będzie miał kolor czerwony.

:nth-child i :nth-of-type

Nie masz ograniczeń dotyczących pierwszego i ostatniego dziecka oraz typów treści. Pseudoklasy :nth-child i :nth-of-type umożliwiają określenie elementu, który ma określony indeks. Indeksowanie w selektorach arkusza CSS rozpoczyna się od 1.

Do tych pseudoklas możesz też przekazać więcej niż indeks. Jeśli chcesz zaznaczyć wszystkie równomierne elementy, możesz użyć elementu :nth-child(even).

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

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

Ten selektor wybiera co trzeci element, zaczynając od pozycji 3. Wartość n w tym wyrażeniu to indeks, którego wartość rozpoczyna się od 0, czyli 3 (3n) i wskazuje, ile mnożysz ten indeks.

Załóżmy, że masz 7 elementów <li>. Pierwszy wybrany element to 3, ponieważ 3n+3 oznacza (3 * 0) + 3. W następnej iteracji zostanie wybrany element 6, ponieważ n zwiększył się do 1, więc (3 * 1) + 3). To wyrażenie działa zarówno w przypadku :nth-child, jak i :nth-of-type.

Tego typu selektor możesz poeksperymentować z n-tym testerem podrzędnym lub narzędziem do wybierania ilości.

:only-of-type

Ponadto w grupie elementów równorzędnych z użyciem :only-of-type możesz znaleźć jedyny element określonego typu. Jest to przydatne, gdy chcesz wybrać listy z jednym elementem lub znaleźć jedyny pogrubiony element w akapicie.

Znajdowanie pustych elementów

Czasami przydaje się identyfikowanie całkowicie pustych elementów – do tego istnieje też pseudoklasa.

:empty

Jeśli element nie ma elementów podrzędnych, stosowana jest do nich pseudoklasa :empty. Elementy podrzędne to nie tylko elementy HTML czy węzły tekstowe. Mogą też być odstępami, co może być mylące, gdy debugujesz ten kod HTML i rozważasz, dlaczego nie działa z :empty:

<div>
</div>

Między otwierającym a zamykającym tagiem <div> znajduje się spacja, więc puste pole nie będzie działać.

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

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

Dzięki usłudze :empty możesz to znaleźć i ją ukryć.

.post :empty {
    display: none;
}

Znajdowanie i wykluczanie wielu elementów

Niektóre pseudoklasy pomagają pisać bardziej kompaktowe kody CSS.

:is()

Jeśli chcesz znaleźć wszystkie elementy podrzędne h2, li i img w elemencie .post, możesz utworzyć selektor w ten sposób:

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

Dzięki pseudoklasie :is() możesz napisać prostszą wersję:

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

Pseudoklasa :is jest nie tylko bardziej krótka niż lista selektora, ale także jest bardziej wygodna. W większości przypadków, jeśli na liście wyboru występuje błąd lub nieobsługiwany selektor, cała lista przestanie działać. Jeśli w przekazanych selektorach w pseudoklasie :is wystąpi błąd, selektor zignoruje nieprawidłowy selektor, ale użyje tych, które są prawidłowe.

:not()

Możesz też wykluczać elementy za pomocą pseudoklasy :not(). Możesz go użyć np. do określenia stylu wszystkich linków, które nie mają atrybutu class.

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

Pseudoklasa :not może też ułatwić ułatwienie dostępu. Na przykład <img> musi zawierać alt, nawet jeśli jest pusta, aby można było utworzyć 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