Pseudoelementy CSS

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

Składnia pseudoelementów

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-LINE

Jednak 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.

Uwaga

W specyfikacjach CSS 1 i CSS 2 składnia pseudoelementów była taka sama, jak pseudoklas, czyli zawierała tylko jeden dwukropek i identyfikator, np.: :first-line.

W specyfikacji selektorów CSS3 postanowiono rozróżnić składnię pseudoelementów i pseudoklas przez wprowadzenie dodatkowego dwukropka do tych pierwszych. Z tego powodu wszystkie pseudoelementy, które zostały zdefiniowane w dwóch pierwszych specyfikacjach CSS, można zapisywać na dwa sposoby: z jednym dwukropkiem lub dwoma dwukropkami. Dotyczy to następujących czterech pseudoelementów:

:first-line lub ::first-line
:first-letter lub ::first-letter
:before lub ::before
:after lub ::after

Wszystkie pozostałe pseudoelementy, które dodano w CSS3 i później, muszą być zapisywane z dwoma dwukropkami z przodu.

Mimo że cztery pseudoelementy można zapisywać z jednym dwukropkiem, dla czytelności kodu lepiej jest trzymać się zalecanej składni z dwoma dwukropkami w zapisie wszystkich pseudoelementów.

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)

Pseudoklasy CSS Kurs CSS Dopełnienie CSS