Pseudoelementy CSS to abstrakcyjne elementy reprezentujące pewne części dokumentu HTML, do których nie ma łatwego dostępu lub do których w ogóle nie da się odnieść przy użyciu zwykłych selektorów CSS.
Powiedzmy na przykład, że chcemy nadać specjalne formatowanie pierwszej literze akapitu albo pierwszemu wierszowi akapitu. W przypadku pierwszej litery akapitu można zastosować element span, ale umieszczanie w nim pierwszej litery każdego interesującego nas akapitu byłoby uciążliwe i niepotrzebnie zwiększałoby objętość kodu HTML.
Z pierwszym wierszem byłoby jeszcze trudniej, ponieważ jego długość zmienia się w zależności od wielu czynników, takich jak na przykład szerokość okna przeglądarki. Nie da się więc z góry określić, które słowa akapitu stanowią jego pierwszy wiersz, ponieważ w każdej sytuacji może być ich mniej lub więcej.
W obu tych przypadkach najprostszym i najskuteczniejszym rozwiązaniem jest użycie właśnie pseudoelementów, odpowiednio ::first-letter (pierwsza litera) i ::first-line (pierwszy wiersz).
Pseudoelementy CSS — składnia
Składnia pseudoelementu ma postać dwóch dwukropków i identyfikatora (nazwy):
::nazwa-pseudoelementu {deklaracje}
Między dwukropkami a także między nimi i nazwą pseudoelementu nie może być żadnych odstępów. Ponadto w nazwach pseudoelementów nie jest rozróżniana wielkość liter, dlatego wszystkie poniższe wersje są prawidłowe według zasad składni CSS:
::first-line
::First-Line
::fIrsT-LiNe
::FIRST-LINEJednak to, że coś jest dozwolone, nie oznacza, że należy to robić. Dlatego lepiej trzymać się tradycyjnego zapisu nazw pseudoelementów samymi małymi literami. Dzięki temu kod jest czytelniejszy i łatwiejszy do zrozumienia.
Pseudoelementy w selektorach złożonych
Ogólna zasada jest taka, że selektor złożony może zawierać tylko jeden pseudoelement, który musi być jego ostatnim członem. Wynika to z tego, że pseudoelementy nie są „prawdziwymi elementami” obecnymi w DOM, a więc nie mogą być wybierane przez selektory. Od tej reguły są jednak wyjątki.
Niektóre pseudoelementy mogą być tzw. elementami źródłowymi (ang. originating element) innych pseudoelementów, które w takim przypadku noszą nazwę podpseudopodelementów (ang. sub-pseudo-element.
Kiedy na przykład typ prezentacji pseudoelementów ::before i ::after zostanie ustawiony na list-item (tzn. display: list-item), to stają się one elementami źródłowymi pseudoelementu ::marker, w efekcie czego można używać podpseudoelementów ::before::marker i ::after::marker.
Pseudoelementy z pseudoklasami
Pseudoelementy można łączyć z pseudoklasami w jednym selektorze, ale tylko, jeśli pseudoklasa znajduje się przed pseudoelementem. Inaczej mówiąc, pseudoelement może wybrać część elementu znajdującą się w określonym stanie reprezentowanym przez pseudoklasę, ponieważ ma ona reprezentację w strukturze DOM, natomiast pseudoklasa nie może wybrać części elementu reprezentowanej przez pseudoelement, ponieważ ten nie ma reprezentacji w DOM. Spójrz na poniższy przykład:
p:hover::first-letter {color: red}W tym przypadku pseudoelement ::first-letter odnosi się do pierwszej litery elementu p, na który najechano kursorem myszy (znajdującego się w stanie :hover).
A teraz spójrz na poniższy przykład, który jest nieprawidłowy:
p::first-letter:hover {color: red}W tym przypadku pseudoklasa :hover nie wybierze tego, do czego odnosi się pseudoelement ::first-letter (czyli pierwszej litery akapitu).
Lista pseudoelementów
Definicje pseudoelementów CSS są rozrzucone po kilku specyfikacjach CSS. Niektóre z nich są we wczesnej fazie rozwoju, inne są już w stabilnym i dojrzałym stanie. Poniżej znajduje się lista pseudoelementów CSS, które są już obsługiwane przynajmniej przez część przeglądarek. Kliknij nazwę wybranego pseudoelementu, aby przejść do strony z jego szczegółowym opisem.
::after- Wstawia treść za wybranym elementem
::backdrop- Reprezentuje pole o wielkości obszaru widoku renderowane pod elementem wyświetlonym jako warstwa wierzchnia
::before- Wstawia treść przed wybranym elementem
::cue- Reprezentuje napisy w filmach w formacie WebVTT
::file-selector-button- Reprezentuje przycisk służący do wyboru pliku do przesłania na serwer
::first-letter- Wybiera pierwszą literę treści wybranego elementu
::first-line- Wybiera pierwszy wiersz treści wybranego elementu
::marker- Odnosi się do pól elementów listy
::part()- Reprezentuje element Shadow Tree, który ma pasujący atrybut
part ::placeholder- Reprezentuje tekst zastępczy w polu tekstowym lub obszarze tekstowym
::selection- Odnosi się do tekstu zaznaczonego na stronie przez użytkownika
::target-text- Wybiera fragment tekstu, do którego przeglądarka przewinęła stronę na podstawie technologii dyrektyw fragmentów tekstu w adresach URL (URL Fragment Text Directives)
