Pseudoelementy i Pseudoklasy
Są to narzędzia w języku CSS, które pozwalają na precyzyjne selekcjonowanie i stylizację elementów HTML. Stanowią one kluczowy element w budowaniu elastycznych i estetycznych interfejsów internetowych, umożliwiając programistom dostęp do specyficznych części dokumentu HTML i definiowanie niestandardowych stylów.
Pseudoklasy
Są używane do wybrania elementów na podstawie ich stanu lub położenia względem dokumentu. Są one oznaczane przez jeden dwukropek (:).
| Selektor | Przykład | Opis |
:active | p:active | oznacza stan aktywacji, stosowany do hiperłączy, gdy są kliknięte, ale przed zwolnieniem przycisku myszy. |
:checked | input:checked | dotyczy zaznaczonych elementów <input>. Na przykład, input:checked identyfikuje wszystkie zaznaczone pola wyboru. |
:disabled | input:disabled | odnosi się do nieaktywnych elementów, takich jak wyłączone pola formularza. Na przykład, input:disabled identyfikuje nieaktywne elementy wejścia. |
:empty | p:empty | identyfikuje elementy, które nie zawierają żadnych elementów potomnych. Na przykład, p:empty odnosi się do pustego paragrafu. |
:enabled | input:enabled | stosuje się do aktywnych elementów, takich jak aktywne pola formularza. Przykładowo, input:enabled identyfikuje aktywne elementy wejścia. |
:first-child | p:first-child | określa pierwszy element potomny rodzica. Na przykład, p:first-child identyfikuje pierwszy paragraf w obrębie swojego rodzica. |
:first-of-type | p:first-of-type | identyfikuje pierwszy element potomny rodzica, ale tylko tego określonego typu. Przykładowo, p:first-of-type odnosi się do pierwszego paragrafu w obrębie swojego rodzica, jeżeli jest typu <p>. |
:focus | input:focus | odnosi się do elementów, na których skupił się użytkownik, na przykład po kliknięciu myszą lub użyciu klawisza TAB. Przykładowo, input:focus identyfikuje pole wejścia, na którym jest skupiony kursor. |
:hover | p:hover | dotyczy elementów, nad którymi znajduje się kursor myszy. Na przykład, a:hover identyfikuje hiperłącze, gdy nad nim jest kursor myszy. |
:in-range | input:in-range | identyfikuje elementy <input>, których wartość mieści się w określonym zakresie, na przykład pola liczbowe. |
:invalid | input:invalid | identyfikuje elementy <input>, które posiadają nieprawidłową wartość, na przykład pole wymagające wprowadzenia liczby, a otrzymano tekst. |
:lang(język) | p:lang(pl) | odnosi się do elementów, których atrybut lang zaczyna się od określonego języka. Na przykład, p:lang(pl) identyfikuje paragrafy w języku polskim. |
:last-child | p:last-child | identyfikuje ostatni element potomny rodzica, na przykład p:last-child dotyczy ostatniego paragrafu w obrębie swojego rodzica. |
:last-type-of | p:last-type-of | odnosi się do ostatniego elementu potomnego rodzica tego samego typu, na przykład p:last-of-type identyfikuje ostatni paragraf w obrębie swojego rodzica, jeżeli jest typu <p>. |
:link | a:link | identyfikuje nieodwiedzone hiperłącza, na przykład a:link. |
:not(selektor) | :not(p) | neguje wybór określonego selektora. Przykładowo, :not(p) identyfikuje wszystkie elementy, które nie są paragrafami. |
:nth-child(numer) | p:nth-child(2) | identyfikuje element potomny rodzica. Na przykład, p:nth-child(2) odnosi się do drugiego paragrafu w obrębie swojego rodzica. |
:nth-last-child(n) | p:nth-last-child(2) | działa podobnie jak :nth-child(n), ale elementy są liczone od końca. |
:nth-last-of-type(n) | p:nth-last-of-type(2) | identyfikuje n-ty element potomny rodzica, ale tylko tego samego typu. |
:nth-of-type(n) | p:nth-of-type(n) | identyfikuje n-ty element potomny rodzica, ale tylko tego samego typu. |
:only-of-type | p:only-of-type | identyfikuje elementy, które są jedynym elementem danego typu w obrębie swojego rodzica. |
:only-child | p:only-child | identyfikuje elementy, które są jedynym dzieckiem swojego rodzica. |
:optional | input:optional | identyfikuje elementy <input>, które nie mają atrybutu required. |
:out-of-range | input:out-of-range | identyfikuje elementy <input>, których wartość przekracza określony zakres. |
:read-only | input:read-only | identyfikuje elementy <input>, które posiadają atrybut readonly. |
:read-write | input:read-write | identyfikuje elementy <input>, które nie posiadają atrybutu readonly. |
:required | input:required | identyfikuje elementy <input>, które posiadają atrybut required. |
| :root | root | identyfikuje główny korzeń dokumentu. |
:target | #id:target | identyfikuje aktywny element oznaczony w danym momencie, np. hiperłącze kliknięte, które prowadzi do tego elementu. |
:valid | input:valid | identyfikuje elementy <input>, które posiadają poprawną wartość. |
| :visited | a:visited | identyfikuje hiperłącza, które zostały już odwiedzone. |
Pseudoelementy
Pseudoelementy pozwalają na stylizację specyficznych części elementu, które nie są bezpośrednio reprezentowane w dokumencie HTML. Są one oznaczane dwukropkiem (::) i są stosowane do selekcji określonych części elementów.
| Selektory | Przykład | Opis |
| ::after | p::after | identyfikuje treść dodawaną po każdym <p>. |
| ::before | p::before | identyfikuje treść wstawianą przed każdym <p> |
| ::first-letter | p::first-letter | identyfikuje pierwszą literę w każdym <p>. |
| ::first-line | p::first-line | identyfikuje pierwszą linię tekstu w każdym <p>. |
::selection | p::selection | identyfikuje styl zaznaczonego obszaru tekstu, umożliwiając dostosowanie jego wyglądu. |
Źródła tekstowe:
https://rafalorzelek.pl (Format tabeli)