Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

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

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

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

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

: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

: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

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

: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

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

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`

Obsługa przeglądarek

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

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

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

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

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

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

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

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

🎉

O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.

Ostatnia aktualizacja: 2021-04-28 UTC.

web.dev
- web.dev
  
  Chcemy pomóc Ci tworzyć atrakcyjne, dostępne, szybkie i bezpieczne witryny działające w różnych przeglądarkach i dla wszystkich użytkowników. Ta strona zawiera materiały, które Ci w tym pomogą, napisane przez członków zespołu Chrome oraz ekspertów zewnętrznych.
Opublikuj coś
- Zgłoś błąd
- Zobacz nierozwiązane problemy
Powiązane informacje
Obserwuj