10. Pseudoelementy CSS

> Dodaj do ulubionych

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.

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)