Podcast CSS – 015: Pseudo-classes
.
Załóżmy, że masz formularz rejestracji e-mail,
i chcesz, aby pole formularza e-mail miało czerwone obramowanie, jeśli zawiera nieprawidłowy adres e-mail.
Jak to zrobić?
Możesz użyć pseudoklasy CSS :invalid
,
który jest jedną z wielu pseudoklas udostępnianych 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 wejściowe użytkownika, takie jak nieprawidłowy adres e-mail. Są one opisane w module selektorów. W tym module omówimy je bardziej szczegółowo.
W przeciwieństwie do pseudoelementów Więcej informacji na ten temat znajdziesz w poprzednim module. pseudoklasy łączą się z określonymi stanami, w których może znajdować się element, a nie określać styl części tego elementu.
Stany interaktywne
Poniższe pseudoklasy są stosowane z powodu interakcji użytkownika ze stroną.
:hover
Jeśli użytkownik ma urządzenie wskazujące, takie jak mysz lub trackpad,
i umieszczają go nad elementem,
możesz poznać ten stan dzięki
:hover
, aby zastosować style.
Jest to przydatna informacja, że z elementem można wchodzić w interakcję.
:active
Ten stan jest wyzwalany, gdy użytkownik aktywnie podejmuje interakcję z elementem: np. kliknięcie – przed jego zwolnieniem. W przypadku urządzenia wskazującego takie jak mysz wskazuje czas rozpoczęcia kliknięcia, które 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ą
Pseudoklasa :focus
.
Możesz również zareagować, gdy element podrzędny elementu zostanie zaznaczony przy użyciu:
:focus-within
Elementy, które można zaznaczyć, takie jak przyciski, wyświetli pierścień ostrości nawet po kliknięciu. W takiej sytuacji deweloper zastosuje taki kod CSS:
button:focus {
outline: none;
}
Ten kod CSS usuwa domyślny pierścień zaznaczenia w przeglądarce, gdy element zostaje zaznaczony,
co stanowi problem z ułatwieniami dostępu w przypadku użytkowników poruszających się po stronie internetowej za pomocą klawiatury.
Jeśli nie ma stylu zaznaczenia,
używając klawisza Tab, nie będą oni mogli śledzić, gdzie jest aktualnie fokus.
Z: :focus-visible
możesz zaprezentować styl zaznaczenia, gdy element zostanie zaznaczony za pomocą klawiatury.
a jednocześnie używać reguły outline: none
, aby uniemożliwić mu interakcję z urządzeniem wskaźnika.
button:focus {
outline: none;
}
button:focus-visible {
outline: 1px solid black;
}
:target
:target
pseudoklasa wybiera element, którego element id
pasuje do fragmentu adresu URL.
Załóżmy, że masz taki kod HTML:
<article id="content">
…
</article>
Możesz dołączać style do tego elementu, gdy adres URL zawiera atrybut #content
.
#content:target {
background: yellow;
}
Przydaje się to do wyróżniania obszarów, które mogły zostać dodane do linków. np. główną treść witryny, za pomocą linku pomijania.
Historyczne stany
:link
:link
pseudoklasę można zastosować do dowolnego elementu <a>
z wartością href
, który nie został jeszcze odwiedzony.
:visited
Możesz zmienić styl linku, który już odwiedził użytkownik, za pomocą
:visited
pseudoklasa.
Jest to stan odwrotny do stanu :link
, ale masz mniej właściwości CSS do użycia
zagrożeniami związanymi z bezpieczeństwem.
Możesz zmieniać styl tylko tych elementów: color
, background-color
,
border-color
, outline-color
oraz kolor SVG fill
i stroke
.
Kolejność ma znaczenie
Jeśli zdefiniujesz styl :visited
,
można ją zastąpić pseudoklasą linku o co najmniej takiej samej szczegółowości.
Z tego powodu
zalecamy użycie reguły LVHA do stylu 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 te elementy mogą znajdować się w interakcjach z nimi.
:disabled
i :enabled
Element formularza
np. <button>
jest wyłączona przez przeglądarkę,
możesz poznać ten stan dzięki
Pseudoklasa :disabled
.
:enabled
pseudoklasa jest dostępna dla stanu przeciwnego,
chociaż elementy formularza mają też domyślnie wartość :enabled
,
dlatego możesz nie sięgnąć po tę pseudoklasę.
:checked
i :indeterminate
:checked
pseudoklasa jest dostępna, gdy uzupełniający element formularza
np. gdy pole wyboru lub opcja jest zaznaczone.
Stan :checked
ma postać binarną(prawda lub fałsz),
ale pola wyboru są pośrednie, gdy nie są zaznaczone ani odznaczone.
Jest to tzw.
:indeterminate
stan.
Przykładem tego stanu jest opcja „zaznacz wszystko” pozwala zaznaczyć wszystkie pola wyboru w grupie. Jeśli użytkownik odznaczył jedno z tych pól wyboru, pole wyboru głównego nie będzie już reprezentować „wszystko” podczas sprawdzania, powinna zostać więc umieszczona w stanie nieokreślonym.
Element <progress>
również ma nieokreślony stan, którego styl można określić.
Częstym zastosowaniem jest nadanie mu paska, aby zasygnalizować, że nie jest jeszcze potrzebnych.
:placeholder-shown
Jeśli pole formularza zawiera atrybut placeholder
i brak wartości,
:placeholder-shown
pseudoklasy można użyć do dołączenia stylów do danego stanu.
Gdy tylko w polu pojawią się treści,
niezależnie od tego, czy ma wartość placeholder
, czy nie,
ten stan nie będzie już obowiązywać.
Stany weryfikacji
Aby odpowiedzieć na weryfikację formularza HTML, możesz użyć pseudoklas takich jak
:valid
:invalid
i
:in-range
.
Pseudoklasy :valid
i :invalid
są przydatne w kontekstach
np. pole adresu e-mail zawierające atrybut pattern
, który musi zostać dopasowany,
, aby był on prawidłowym polem.
Prawidłowy stan wartości może wyświetlić się użytkownikowi,
i pomoże im zrozumieć, że mogą bezpiecznie przejść do następnego pola.
Pseudoklasa :in-range
jest dostępna, jeśli dane wejściowe mają min
i max
,
na przykład w postaci wartości liczbowej, a której wartość mieści się w tych granicach.
Dzięki formularzom HTML
możesz określić, czy pole z atrybutem required
jest wymagane.
:required
pseudoklasa będzie dostępna w przypadku pól wymaganych.
Pola, które nie są wymagane, można wybierać za pomocą
:optional
pseudoklasa.
Wybieranie elementów według ich indeksu, kolejności i wystąpienia
Istnieje grupa pseudoklas, które wybierają elementy na podstawie tego, gdzie znajdują się 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ż wybrać elementy, które nie mają elementów potomnych,
z
:only-child
pseudoklasa.
:first-of-type
i :last-of-type
Możesz wybrać
:first-of-type
i
:last-of-type
,
Wygląda na to, że działają one tak samo jak :first-child
i :last-child
, ale rozważ ten kod HTML:
<div class="my-parent">
<p>A paragraph</p>
<div>A div</div>
<div>Another div</div>
</div>
A ta usługa porównywania cen:
.my-parent div:first-child {
color: red;
}
Żadne elementy nie będą oznaczone na czerwono, ponieważ pierwsze elementy podrzędne są akapitem, a nie elementem div.
Pseudoklasa :first-of-type
przydaje się w tym kontekście.
.my-parent div:first-of-type {
color: red;
}
Mimo że 1 <div>
jest drugim dzieckiem,
jest to nadal pierwszy tego typu w elemencie .my-parent
,
więc w przypadku tej reguły będzie on miał kolor czerwony.
:nth-child
i :nth-of-type
Możesz mieć nie tylko imię i nazwisko dziecka oraz ich typy.
:nth-child
oraz
:nth-of-type
pseudoklasy umożliwiają określenie elementu, który ma określony indeks.
Indeksowanie w selektorach arkusza CSS zaczyna się od 1.
Do tych pseudoklas możesz przekazać więcej niż indeks.
Jeśli chcesz zaznaczyć wszystkie elementy parzyste, możesz użyć :nth-child(even)
.
Możesz też utworzyć bardziej złożone selektory, które znajdują elementy w regularnych odstępach czasu, przy użyciu mikroskładni An+B.
li:nth-child(3n+3) {
background: yellow;
}
Ten selektor wybiera co trzeci element,
od punktu 3.
Element n
w tym wyrażeniu to indeks,
zaczyna się od 0, a 3 (3n
) to wartość, przez którą mnożysz indeks.
Załóżmy, że masz 7 produktów <li>
.
Pierwszy wybrany element to 3, ponieważ 3n+3
to (3 * 0) + 3
.
Następna iteracja wybierze element 6, bo wartość n
wzrosła do 1
,
a więc (3 * 1) + 3)
.
To wyrażenie działa zarówno w przypadku :nth-child
, jak i :nth-of-type
.
Możesz użyć tego rodzaju selektora na tym nth-child tester lub ten narzędzia wyboru ilości.
:only-of-type
I wreszcie, możesz znaleźć jedyny element określonego typu w grupie rodzeństwa,
:only-of-type
Jest to przydatne, gdy chcesz wybrać listy z tylko jednym elementem.
lub jeśli chcesz znaleźć
jedyny pogrubiony element akapitu.
Znajdowanie pustych elementów
Czasem przydaje się wykrycie całkowicie pustych elementów, i istnieje pseudoklasa.
:empty
Jeśli element nie ma elementów potomnych, funkcja
Mają do nich zastosowanie pseudoklasy :empty
.
Dzieci nie są jednak tylko elementami HTML czy węzłami tekstowymi: mogą też być odstępami,
co może być mylące, gdy debugujesz poniższy kod HTML i zastanawiasz się, dlaczego nie działa on z kodem :empty
:
<div>
</div>
Powodem jest to, że między otwierającym a zamykającym elementem <div>
jest spację,
więc puste pole nie sprawdzi się.
Pseudoklasa :empty
może być przydatna, jeśli masz niewielką kontrolę nad kodem HTML i chcesz ukryć puste elementy,
np. edytora treści WYSIWYG.
W tym przypadku edytor dodał 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>
Za pomocą usługi :empty
możesz to znaleźć i ukryć.
.post :empty {
display: none;
}
Znajdowanie i wykluczanie wielu elementów
Niektóre pseudoklasy pomagają napisać bardziej kompaktowy kod CSS.
:is()
Jeśli chcesz znaleźć wszystkie elementy podrzędne h2
, li
i img
w elemencie .post
:
można utworzyć listę selektora w taki sposób:
.post h2,
.post li,
.post img {
…
}
Dzięki aplikacji :is()
pseudoklasy, możesz napisać bardziej kompaktową wersję:
.post :is(h2, li, img) {
…
}
Pseudoklasa :is
jest nie tylko bardziej kompaktowa niż lista selektora, ale jest też bardziej wygodna.
W większości przypadków
jeśli na liście selektora występuje błąd lub nieobsługiwany selektor,
Cała lista selektorów nie będzie już działać.
Jeśli w przekazanych selektorach w pseudoklasie :is
wystąpi błąd,
Zignoruje nieprawidłowy selektor, tylko użyje tych, które są prawidłowe.
:not()
Możesz też wykluczać elementy za pomocą
:not()
pseudoklasa.
Możesz na przykład użyć tego stylu, aby określić styl wszystkich linków, które nie mają atrybutu class
.
a:not([class]) {
color: blue;
}
Pseudoklasa :not
może też pomóc w poprawie ułatwień dostępu.
Na przykład pole <img>
musi zawierać wartość alt
, nawet jeśli jest pusta,
więc możesz napisać regułę CSS, która doda gruby czerwony kontur do nieprawidłowych obrazów:
img:not([alt]) {
outline: 10px red;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat pseudozajęć
Pseudoklasy działają tak, jakby klasa została dynamicznie zastosowana do elementu, a pseudoelementy – na sam element.
Które z tych elementów są pseudoklasą funkcjonalną?
:target
:not()
:is()
:empty
Które z tych pseudoklas są związane z interakcją z użytkownikiem?
:squeeze
:focus-within
:hover
:press
:target
Które z poniższych to pseudoklasy stanowe <form>
?
:indeterminate
:fresh
:in-range
:enabled
:valid
:loading
:checked