Selektory#
Przegląd selektorów#
Selektor reprezentuje strukturę. Struktura ta może być używana jako warunek (np. w regule CSS) określający, które elementy w drzewie dokumentu zostaną dopasowane przez selektor, lub jako płaski opis fragmentu HTML lub XML odpowiadający tej strukturze.
Selektory mają postać od prostych nazw elementów aż do bogatych reprezentacji kontekstowych.
Najnowszy moduł selektorów zawiera następującą tabelę (porównaj z Level 3 i CSS 2.1), podsumowującą składnię selektorów oraz ich najważniejsze cechy:
| Wzorzec | Reprezentuje | Sekcja (online) | Poziom |
|---|---|---|---|
OgólneOgólne | |||
* | Dowolny element. | Universal selector | 2 |
E | Element E. | Type (tag name) selector | 1 |
E , F | Element E i/lub element F. | Selector Lists | 1 |
!E > F | Element E będący rodzicem elementu F (zmiana tematu). | Determining the subject of a selector | 4 |
KombinatoryKombinatory | |||
E F | Element F będący potomkiem elementu F. | Descendant combinator | 1 |
E > F | Element F będący dzieckiem elementu F. | Child combinator | 2 |
E + F | Element F będący bratem następującym elementu F. | Next-sibling combinator | 2 |
E ~ F | Element F będący następnikiem bratowym elementu F. | Following-sibling combinator | 3 |
E || F | Element F będący komórką w elemencie E określającym kolumnę. | Grid-Structural pseudo-classes | 4 |
E /ref/ F | Element F, do którego odwołuje się element E za pomocą atrybutu ref. | Reference combinator | 4 |
AtrybutoweAtrybutowe | |||
E#myid | Element E z identyfikatorem myid. | ID selectors | 1 |
E#warning | Element E z klasą warning. | Class selectors | 1 |
E[foo="bar" i] | Element E z atrybutem foo o wartości bar (bez względu na wielkość liter ASCII w wartości). | Attribute selectors: Case-sensitivity | 4 |
E[foo] | Element E z atrybutem foo. | Attribute selectors | 2 |
E[foo="bar"] | Element E z atrybutem foo o wartości bar. | Attribute selectors | 2 |
E[foo~="bar"] | Element E z atrybutem foo, którego wartość zawiera słowo bar. | Attribute selectors | 2 |
E[foo|="en"] | Element E z atrybutem foo, którego wartość jest równa en lub zaczyna się od łącznika en-. | Attribute selectors | 2 |
E[foo^="bar"] | Element E z atrybutem foo, którego wartość zaczyna się od bar. | Attribute selectors | 3 |
E[foo$="bar"] | Element E z atrybutem foo, którego wartość kończy się na bar. | Attribute selectors | 3 |
E[foo*="bar"] | Element E z atrybutem foo, którego wartość zawiera bar w dowolnym miejscu. | Attribute selectors | 3 |
PseudoklasyPseudoklasy | |||
Kombinacji logicznychE:matches(s1, s2) | Element E, który pasuje do selektora s1 i/lub selektora s2. | Matches-any pseudo-class | 4 |
E:not(s1, s2) | Element E, który nie pasuje do selektora s1 lub selektora s2. | Negation pseudo-class | 3/4 |
LingwistyczneE:dir(ltr) | Element E z kierunkiem tekstu lewo-prawo. | Linguistic Pseudo-classes | 4 |
E:lang(zh, *-hant) | Element E z językiem chińskim (dowolny dialekt lub system zapisu) lub innym składającym się z chińskich znaków. | Linguistic Pseudo-classes | 2/4 |
LokalizacjiE:any-link | Element E, który jest hiperłączem (odwiedzonym lub nieodwiedzonym). | Location Pseudo-classes | 4 |
E:link | Element E, który jest hiperłączem nieodwiedzonym. | Location Pseudo-classes | 1 |
E:visited | Element E, który jest hiperłączem odwiedzonym. | Location Pseudo-classes | 1 |
E:local-link | Element E, który jest hiperłączem z identycznym adresem URL, jak w bieżącym dokumencie. | Location Pseudo-classes | 4 |
E:local-link(0) | Element E, który jest hiperłączem z identyczną domeną w adresie URL, jak w bieżącym dokumencie. | Location Pseudo-classes | 4 |
E:target | Element E, który jest celem w bieżącym adresie URL strony. | Location Pseudo-classes | 3 |
E:scope | Element E, który został oznaczony jako element referencyjny (istotne przy zawężaniu stylów). | Location Pseudo-classes | 4 |
Akcji użytkownikaE:hover | Element E, nad którym znajduje się urządzenie wskazujące. | The user action pseudo-classes | 3-UI*/2 |
E:active | Element E, który został aktywowany. | The user action pseudo-classes | 3-UI*/1 |
E:focus | Element E, który posiada zogniskowanie. | The user action pseudo-classes | 3-UI*/2 |
E:drop | Element E, który jest dowolnym celem upuszczenia. | The user action pseudo-classes | 4 |
E:drop(active valid) | Element E, który jest aktywnym i prawidłowym celem upuszczenia. | The user action pseudo-classes | 4 |
Stanów kontroli wejściaE:enabled | Element interfejsu użytkownika E, który jest w stanie odblokowania. | Input Control States | 3-UI*/3 |
E:disabled | Element interfejsu użytkownika E, który jest w stanie zablokowania. | Input Control States | 3-UI*/3 |
E:read-write | Element interfejsu użytkownika E, który jest w stanie edycji. | Input Control States | 3-UI/4 |
E:read-only | Element interfejsu użytkownika E, który jest tylko do odczytu. | Input Control States | 3-UI/4 |
E:placeholder-shown | Element interfejsu użytkownika E, który ma zdefiniowany i pokazuje w danej chwili tekst zastępczy. | Input Control States | 4 |
E:default | Element interfejsu użytkownika E, który jest domyślnym spośród zestawu podobnych elementów. | Input Control States | 3-UI/4 |
Stanów wartości wejściaE:checked | Element interfejsu użytkownika E, który jest w stanie zaznaczenia. | Input Value States | 3-UI*/3 |
E:indeterminate | Element interfejsu użytkownika E, który jest w stanie nieokreślonym (ani zaznaczony ani odznaczony). | Input Value States | 3-UI*/4 |
Sprawdzenia wartości wejściaE:valid | Element interfejsu użytkownika E, który ma poprawną (walidującą) wartość. | Input Value-checking | 3-UI/4 |
E:invalid | Element interfejsu użytkownika E, który nie ma poprawnej (walidującej) wartości. | Input Value-checking | 3-UI/4 |
E:in-range | Element interfejsu użytkownika E, którego wartość znajduje się w dopuszczalnym zakresie. | Input Value-checking | 3-UI/4 |
E:out-of-range | Element interfejsu użytkownika E, którego wartość nie znajduje się w dopuszczalnym zakresie. | Input Value-checking | 3-UI/4 |
E:required | Element interfejsu użytkownika E, w którym podanie wartości jest wymagane. | Input Value-checking | 3-UI/4 |
E:optional | Element interfejsu użytkownika E, w którym podanie wartości jest opcjonalne. | Input Value-checking | 3-UI/4 |
E:user-error | Element interfejsu użytkownika E, w którym użytkownik popełnił błąd przy wypełnianiu. | Input Value-checking | 4 |
Podstawowej strukturyE:root | Element E, który jest korzeniem dokumentu. | Tree-Structural pseudo-classes | 3 |
E:empty | Element E, który nie ma żadnych dzieci (włącznie z węzłami tekstowymi). | Tree-Structural pseudo-classes | 3 |
E:blank | Element E, który nie ma żadnych dzieci (dopuszczalne są węzły tekstowe z białymi znakami). | Tree-Structural pseudo-classes | 4 |
Indeksowania dzieciE:nth-child(n) | Element E, który jest n-tym dzieckiem swego rodzica. | Child-indexed Pseudo-classes | 3 |
E:nth-last-child(n) | Element E, który jest n-tym dzieckiem swego rodzica (od końca). | Child-indexed Pseudo-classes | 3 |
E:first-child | Element E, który jest pierwszym dzieckiem swego rodzica. | Child-indexed Pseudo-classes | 2 |
E:last-child | Element E, który jest ostatnim dzieckiem swego rodzica. | Child-indexed Pseudo-classes | 3 |
E:only-child | Element E, który jest jedynym dzieckiem swego rodzica. | Child-indexed Pseudo-classes | 3 |
Indeksowania dzieci tego samego typuE:nth-of-type(n) | Element E, który jest n-tym dzieckiem tego samego typu w swoim rodzicu. | Typed Child-indexed Pseudo-classes | 3 |
E:nth-lsat-of-type(n) | Element E, który jest n-tym dzieckiem tego samego typu w swoim rodzicu (od końca). | Typed Child-indexed Pseudo-classes | 3 |
E:first-of-type | Element E, który jest pierwszym dzieckiem tego samego typu w swoim rodzicu. | Typed Child-indexed Pseudo-classes | 3 |
E:last-of-type | Element E, który jest ostatnim dzieckiem tego samego typu w swoim rodzicu. | Typed Child-indexed Pseudo-classes | 3 |
E:only-of-type | Element E, który jest jedynym dzieckiem tego samego typu w swoim rodzicu. | Typed Child-indexed Pseudo-classes | 3 |
Indeksowania dzieci wybranego typuE:nth-match(n of selector) | Element E, który jest n-tym dzieckiem wybranego typu (wskazywanym przez selector) w swoim rodzicu. | Selected Child-indexed Pseudo-classes | 4 |
E:nth-last-match(n of selector) | Element E, który jest n-tym dzieckiem wybranego typu (wskazywanym przez selector) w swoim rodzicu (od końca). | Selected Child-indexed Pseudo-classes | 4 |
Indeksowania kolumnE:nth-column(n) | Element E, który jest n-tą kolumną włącznie z zawartymi w niej komórkami. | Grid-Structural Selectors | 4 |
E:nth-last-column(n) | Element E, który jest n-tą kolumną włącznie z zawartymi w niej komórkami (od końca). | Grid-Structural Selectors | 4 |
PseudoelementyPseudoelementy | |||
E::first-line | Pierwsza sformatowana linia w elemencie E. | Pseudo-elements | 1 |
E::first-letter | Pierwsza sformatowana litera w elemencie E. | Pseudo-elements | 1 |
Niektóre selektory poziomu 4 (oznaczone powyżej jako "3-UI") zostały pierwszy raz wprowadzone i opisane w specyfikacji "CSS Basic User Interface Module Level 3". Dodatkowa gwiazdka przy oznaczeniu "3-UI*" informuje, że specyfikacja bazowego UI jedynie wymienia ten rodzaj selektora (bez jego opisu).
Specyfikacja "Selectors Level 4" umieszcza opisy selektorów w odpowiednich podrozdziałach, zgodnie z przeznaczeniem danego selektora. Ja postąpię podobnie, tzn. na kolejnych stronach pokrótce opiszę każdą z tych grup i wypiszę przynależące do niej selektory. Dzięki temu uniknę powielania tych samych informacji przy opisach każdego selektora z osobna.
Opisy dla najnowszych wariantów selektorów należy traktować z pewnym dystansem. Są to nowości, których na dzień dzisiejszy nie obsługuje żadna aktualna przeglądarka (zatem brak możliwości wykonania praktycznych testów). W niektórych przypadkach ciężko ustalić pierwotne założenia autorów specyfikacji. Istnieje ryzyko, że niektóre selektory zostały całkowicie źle zdefiniowane albo źle zrozumiane przeze mnie - mam wątpliwości co do działania pseudoklas kolumn oraz prawidłowej interpretacji listy selektorów w niektórych pseudoklasach funkcyjnych. W związku z tym należy spodziewać się jeszcze wielu modyfikacji nowego modułu selektorów jak i tej części kursu. Całość będzie stopniowo weryfikowana w późniejszym czasie.
Pasek społecznościowy