Definitive Guide to CSS Pseudo-Class

Niezależnie od tego, czy jesteś nowicjuszem, czy doświadczonym programistą CSS, prawdopodobnie słyszałeś o tym pseudoklasy. Najbardziej znaną pseudoklasą jest prawdopodobnie :wahać się, co pozwala nam stylizować element, gdy jest w stanie zawisu, to znaczy, gdy wskazywane jest urządzenie wskazujące, takie jak mysz.

Zgodnie z koncepcją naszych poprzednich postów na marginesie: auto i CSS Floats, przyjrzymy się bliżej pseudoklasom w tym poście. Zobaczymy jakie naprawdę są pseudoklasy, jak działają, jak możemy je kategoryzować i jak się różnią od pseudoelementów.

Czym są pseudo-klasy?

Pseudoklasa jest słowem kluczowym, które możemy dodać do selektorów CSS w celu zdefiniuj stan specjalny przynależnego elementu HTML. Możemy dodać pseudoklasę do selektora CSS za pomocą składnia jelita grubego : lubię to: a: hover …

Klasa CSS jest atrybutem, który możemy dodawać do elementów HTML, które chcemy zastosować do tych samych reguł stylu, takich jak górne elementy menu lub tytuły widgetów paska bocznego. Innymi słowy, możemy użyć klas CSS do grupować lub klasyfikować elementy HTML które są podobne w taki czy inny sposób.

Pseudoklasy są podobne do nich w tym sensie, że są również używane do dodawania reguł stylu do elementów, które mają tę samą charakterystykę.

Ale podczas gdy prawdziwe klasy są określony przez użytkownika i można zauważyć w kodzie źródłowym, na przykład

, pseudoklasy są dodane przez UA (programy użytkownika), takie jak przeglądarki internetowe, w oparciu o aktualny stan przynależnego elementu HTML.

Cel pseudoklasy

The praca regularnych klas CSS to jest klasyfikować lub grupować elementy. Deweloperzy wiedzą, w jaki sposób ich elementy mają być grupowane: mogą tworzyć klasy, takie jak „elementy menu”, „przyciski”, „miniatury” itp., Aby grupować, a później tworzyć podobne elementy. Klasyfikacje te opierają się na charakterystyce elementów podane przez samych programistów.

Na przykład, jeśli deweloper zdecyduje się użyć a

jako obiekt miniaturowy może go sklasyfikować

z klasą „miniatury”.

 […]

Elementy HTML mają jednak ich własne wspólne cechy na podstawie ich stanu, pozycji, charakteru i interakcji ze stroną i użytkownikiem. Są to cechy, które są nie zazwyczaj oznaczone kodem HTML, ale możemy wyceluj w nich pseudoklasami w CSS, na przykład:

element, który jest ostatni, ubiegły, zeszły dziecko w elemencie macierzystym
link, który jest odwiedził
element, który odszedł pełny ekran.

Są to cechy charakterystyczne dla klas pseudo. Aby lepiej zrozumieć różnicę między klasami i pseudoklasami, załóżmy, że używamy klasy .ostatni, ubiegły, zeszły zidentyfikować ostatnie elementy w różnych pojemnikach macierzystych.

  przedmiot 1
 punkt 2
 punkt 3
 punkt 4

Możemy ustawić te ostatnie elementy potomne za pomocą następującego CSS:

 li.last text-transform: uppercase;  option.last font-style: italic;

Ale co się dzieje, gdy zmienia się ostatni element? Cóż, będziemy musieli przenieść .ostatni, ubiegły, zeszły klasa od poprzedniego ostatniego elementu do bieżącego.

Ten kłopot aktualizowanie klas można pozostawić agentowi użytkownika, przynajmniej dla tych cech, które są wspólne dla elementów (a bycie ostatnim elementem jest tak powszechne, jak to tylko możliwe). Mający predefiniowany :ostatnie dziecko pseudoklasa jest bardzo przydatny. W ten sposób my nie musisz wskazywać ostatniego elementu w kodzie HTML, ale nadal możemy je stylizować za pomocą następującego CSS:

 li: last-child text-transform: uppercase;  opcja: last-child font-style: italic;

Główne typy pseudo-klas

Istnieje wiele rodzajów pseudoklas, wszystkie z nich dostarczają nam sposobów kierowania elementów na podstawie ich funkcji, które w przeciwnym razie są niedostępne lub trudniejsze w dostępie. Oto lista standardowych pseudo klas w MDN.

1. Dynamiczne pseudo-klasy

Dynamiczne pseudoklasy są dodawane i usuwane z elementów HTML dynamicznie, w oparciu o stan, w którym się zmieniają w odpowiedzi na interakcje użytkownika. Niektóre przykłady dynamicznych pseudoklas są :wahać się, :skupiać, :połączyć, i : odwiedził, wszystko to można dodać do tag kotwicy.

 a: visited color: # 8D20AE;  .button: hover, .button: focus font-weight: bold;

2. Pseudo-klasy państwowe

Pseudoklasy oparte na stanie są dodawane do elementów, gdy są w określonym stanie statycznym. Niektóre z najbardziej znanych przykładów to:

:sprawdzone które można zastosować w polach wyboru ()
:pełny ekran kierować na dowolny element, który jest aktualnie wyświetlany w trybie pełnoekranowym
:wyłączone dla elementów HTML, które mogą być w trybie wyłączonym, np ,