Pseudoklasy

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

Obsługa przeglądarek

• 1
• 12
• 1
• 2.

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 1
• 1,3

Źródło

: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

Obsługa przeglądarek

• 1
• 12
• 1
• 1

Źródło

: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 {}

Uwaga: ze względów bezpieczeństwa style zdefiniowane przez :link lub nieodwiedzony można zmieniać tylko za pomocą pseudoklasy :visited, dlatego ważne jest, aby najpierw zdefiniować style zmienne. Pomoże w tym trzymanie się reguły LVHA.

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

Obsługa przeglądarek

• 1
• 12
• 1
• 3,1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 1
• 3,1

Źródło

: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

Obsługa przeglądarek

• 47.
• 79
• 51.
• 9.

Źródło

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

Obsługa przeglądarek

• 10
• 12
• 4
• 5

Źródło

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.

Uwaga: nie należy polegać wyłącznie na kolorach do wskazania zmian stanu, zwłaszcza czerwonego i zielonego, ponieważ osoby niewidome i niedowidzące mogą mieć trudności z dostrzeganiem zmiany stanu lub nawet ją całkowicie przeoczyć. Warto używać kolorów, aby podkreślić zmiany stanu, a także zmienić tekst i ikony, aby wizualnie przedstawić zmianę.

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

Obsługa przeglądarek

• 4
• 12
• 3
• 3,1

Źródło

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

Obsługa przeglądarek

• 2.
• 12
• 1,5
• 3,1

Źródło

Możesz też wybrać elementy, które nie mają elementów potomnych, z :only-child pseudoklasa.

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

Obsługa przeglądarek

• 1
• 12
• 3,5
• 3,1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 3,5
• 3,1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 3,5
• 3,1

Źródło

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

Obsługa przeglądarek

• 1
• 12
• 1
• 3,1

Źródło

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()

Obsługa przeglądarek

• 88
• 88
• 78
• 14

Źródło

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()

Obsługa przeglądarek

• 1
• 12
• 1
• 3,1

Źródło

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.

Prawda

Zwróć uwagę na użycie pojedynczego lub podwójnego znaku : jako kluczowego znaku wyróżniającego w selektorze

Fałsz

Pseudoelementy oznaczają części, a Pseudoklasy oznaczają państwo.

Które z tych elementów są pseudoklasą funkcjonalną?

:is()

🎉

:target

Po pseudoklasach funkcjonalnych znajduje się ciąg (), co wskazuje, że akceptują parametry.

:empty

Po pseudoklasach funkcjonalnych znajduje się ciąg (), co wskazuje, że akceptują parametry.

:not()

🎉

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

:hover

🎉

:press

Spróbuj jeszcze raz.

:squeeze

Spróbuj jeszcze raz.

:target

🎉

:focus-within

🎉

Które z poniższych to pseudoklasy stanowe <form>?

:enabled

🎉

:fresh

Spróbuj jeszcze raz.

:indeterminate

🎉

:checked

🎉

:in-range

🎉

:loading

Spróbuj jeszcze raz.

:valid

🎉