Selektory#
Pseudoelementy#
Pseudoelementy # (pseudo-elements) tworzą różne abstrakcje dla drzewa dokumentu (głównie abstrakcyjne elementy w drzewie renderowania), poza tymi, które zostały określone w języku dokumentu. Wystarczy nadmienić, że języki dokumentów nie oferują mechanizmów dostępowych dla pierwszej litery lub pierwszego wiersza w zawartości elementu. Pseudoelementy pozwalają autorom odnosić się do takich - niedostępnych w inny sposób - informacji. Pseudoelementy mogą również umożliwiać autorom na odwoływanie się do zawartości, która nie istnieje w źródłowym dokumencie (np. pseudoelementy ::before i ::after dają dostęp do generowanej zawartości w CSS).
W najnowszym module Selektorów nie scharakteryzowano poszczególnych pseudoelementów: opisywana jest jedynie ich składnia, ale ze względu na ich ścisłą integrację z modelem renderowania i braku ścisłości z innymi mechanizmami, jak np. zapytaniami DOM, pseudoelementy będą definiowane w innych modułach.
Pseudoelement składa się z podwójnego znaku dwukropka (U+003A, :), po którym następuje nazwa pseudoelementu. Nazwy pseudoelementów są nieczułe na wielkość liter ASCII.
Notacja :: została wybrana ze względu na chęć wyraźnego odróżnienia od siebie pseudoklas (czyli podklas istniejących elementów) i pseudoelementów (elementów, które nie są reprezentowane w drzewie dokumentu). Jednakże, ze względu na kompatybilność wsteczną z już istniejącymi arkuszami stylów, aplikacje klienckie muszą również akceptować wcześniejszą notację pojedynczego dwukropka dla pseudoelementów wprowadzonych przez CSS poziomu 1 i 2 (chodzi o: :first-line, :first-letter, :before i :after). Ten kompatybilnościowy zapis jest niedozwolony we wszystkich nowszych pseudoelementach.
Przyszłe wersje specyfikacji mogą zezwolić na stosowanie wielu pseudoelementów w selektorze.
W odniesieniu do składni całego selektora pseudoelement może pojawić się zaraz za selektorem złożonym reprezentującym element pochodzeniowy # (originating element), czyli element, z którym pseudoelement jest powiązany. Przy stosowaniu pseudoelementów należy spełnić następujące warunki (choć możliwe jest ich wybiórcze nadpisanie przez definicję konkretnego pseudoelementu):
- Dopuszczalny jest tylko jeden pseudoelement w selektorze kompleksowym.
- Pseudoelement musi pojawić się po selektorze złożonym reprezentującym tematy selektora.
- Pseudoelement może pojawić się tylko wtedy, gdy tematem selektora jest ostatni selektor złożony w selektorze.
Za pseudoelementem może następować dowolna kombinacja pseudoklas akcji użytkownika, i w tym wypadku pseudoelement ma zastosowanie tylko wtedy, gdy znajduje się w odpowiednim (pasującym do wprowadzonych pseudoklas) stanie. Dopasowanie wspomnianych pseudoklas do pseudoelementu zależy od konkretnych definicji pseudoklas i pseudoelementów: o ile nie określono inaczej, to żadna z tych pseudoklas nie będzie pasowała do pseudoelementu.
Dla przykładu, pseudoklasa :hover informuje, że może być stosowana do dowolnego pseudoelemntu, czyli selektor ::first-line:hover będzie pasował w chwili, kiedy pierwsza linia zostanie wskazana. Jednakże ani definicja dla :focus ani dla ::first-line nie informuje, że pseudoklasa :focus może być stosowana do pseudoelementu ::first-line, zatem selektor ::first-line:focus nigdy niczego nie dopasuje (choć sam zapis jest poprawny).
Definicje oraz znaczenie poszczególnych pseudoelementów umieszcza się w osobnych specyfikacjach. W tej części kursu scharakteryzuję jedynie pseudoelement pierwszej linii oraz pseudoelement pierwszej litery. Pseudoelementy związane z generowaniem treści lub pseudoelementy z najnowszych modułów CSS prawdopodobnie opiszę w innym miejscu.