The CSS Podcast - 015: Pseudo-classes
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
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
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
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 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
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
:link
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
i :enabled
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
i :indeterminate
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
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
Możesz reagować na walidację formularza HTML za pomocą pseudoklas takich jak :valid
, :invalid
i :in-range
.
Pseudoklasy :valid
i :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ą min
i max
,
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
i :last-child
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
Możesz też wybrać elementy, które nie mają elementów siostrza, za pomocą pseudoklasy :only-child
.
:first-of-type
i :last-of-type
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
i :nth-of-type
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
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
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()
Jeśli chcesz znaleźć wszystkie elementy podrzędne h2
, li
i img
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()
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.
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