Selektory CSS, poziom 3

> Dodaj do ulubionych

Rekomendacja W3C z dnia 29 września 2011 r.

Niniejszy dokument jest tłumaczeniem angielskiego tekstu z poniższej strony i może zawierać usterki związane z procesem tłumaczenia. W razie jakichkolwiek niezgodności między oryginałem, a tłumaczeniem obowiązująca jest wersja oryginalna:
http://www.w3.org/TR/2011/REC-css3-selectors-20110929/
Najnowsza wersja:
http://www.w3.org/TR/css3-selectors/
Najnowsza specyfikacja selektorów:
http://www.w3.org/TR/selectors/
Poprzednia wersja:
http://www.w3.org/TR/2009/PR-css3-selectors-20091215/
Redaktorzy:
Tantek Çelik (ekspert zaproszony)
Elika J. Etemad (ekspert zaproszony)
Daniel Glazman (Disruptive Innovations SARL)
Ian Hickson (Google)
Peter Linss (były edytor, Netscape/AOL)
John Williams (były edytor, Quark, Inc.)

Zapoznaj się z erratą do tego dokumentu, ponieważ może ona zawierać normatywne poprawki.

Zobacz również tłumaczenia.


Streszczenie

Selektory są wzorcami służącymi do wybierania elementów drzewa dokumentu i stanowią jedną z kilku technik wybierania węzłów w dokumentach XML. Zostały optymalnie dostosowane do języków HTML i XML i są zaprojektowane do użytku w kodzie, w którym najważniejsza jest wydajność.

CSS (Kaskadowe arkusze stylów) to język służący do definiowania sposobu prezentacji dokumentów HTML i XML na ekranie, papierze, w mowie itd. W języku tym do wiązania własności z elementami dokumentu służą selektory.

W dokumencie tym znajduje się opis selektorów opisanych już w specyfikacjach CSS 1 [CSS 1] i CSS 2 [CSS 2.1] oraz dodatkowo opis nowych selektorów dla CSS 3 i innych języków, w których mogą być potrzebne.

Selektory definiują następującą funkcję:

wyrażenie * element ? wartość logiczna

To znaczy, dla danego selektora specyfikacja ta określa, czy pasuje on do danego elementu, czy nie.

Wyrażenia te mogą być również używane np. do wyboru zbiorów elementów lub pojedynczych elementów ze zbiorów elementów, poprzez ewaluację w odniesieniu do wszystkich elementów w poddrzewie. STTS (Simple Tree Transformation Sheets), język do transformacji drzew XML korzysta z tego mechanizmu. [STTS3]

Status dokumentu

W niniejszej sekcji opisano status tego dokumentu w chwili jego publikacji. Może on zostać zastąpiony kolejnymi dokumentami. Aktualna lista publikacji W3C oraz najnowsza wersja tego raportu technicznego znajdują się na stronie indeks raportów technicznych W3C pod adresem http://www.w3.org/TR/.

Dokument ten jest wynikiem pracy grupy roboczej ds. CSS jako proponowana rekomendacja.

Rekomendacja W3C to ukończony dokument, który został poddany dokładnej recenzji i którego treść jest możliwa do implementacji. W3C zaleca implementowanie tej specyfikacji. Uwagi można wysyłać na adres (archiwizowanej) publicznej listy mailingowej www-style@w3.org (zobacz instrukcje). W temacie wiadomości e-mail wysyłanej do tej listy dyskusyjnej należy umieścić tekst „css3-selectors”, najlepiej w następujący sposób: “[css3-selectors] „streszczenie uwagi”

Niniejszy dokument został zrecenzowany przez Członków W3C, programistów oraz inne grupy W3C i zainteresowane strony i został zatwierdzony jako Rekomendacja W3C przez Dyrektora W3C. Jest to dokument stabilny i można go używać jako materiału źródłowego oraz cytować w innych dokumentach. Rolą W3C w tworzeniu tej Rekomendacji jest przyciągnięcie uwagi do niniejszej specyfikacji oraz promowania użycia jej w jak największym zakresie. Dzięki temu zwiększa się funkcjonalność i interoperacyjność sieci Web.

Prace nad tym dokumentem zostały przeprowadzone zgodnie z zasadami patentowymi W3C z dnia 5 lutego 2004 r.. W3C utrzymuje publiczną listę wszystkich informacji patentowych ujawnionych w związku z rezultatami prac grupy. Na stronie tej znajdują się także informacje na temat ujawniania patentów. Osoba posiadająca wiedzę na temat patentu, który jej zdaniem zawiera uzasadnione roszczenia musi ujawnić te informacje zgodnie z ustępem 6 zasad patentowych W3C.

Osobny raport dotyczący implementacji zawiera zestaw testów i kilka przykładowych implementacji tej specyfikacji.

Zmiany w niniejszym dokumencie w stosunku do poprzedniej wersji, Rekomendacji proponowanej, zostały wprowadzone tylko w treści początkowej oraz odwołaniach.

Spis treści

1. Wprowadzenie

Selektory poziomu 1 i selektory poziomu 2 są zdefiniowane jako podzbiory selektorów zdefiniowanych odpowiednio w specyfikacjach CSS 1 i CSS 2.1.

1.1. Zależności

Niektóre elementy tej specyfikacji dotyczą wyłącznie CSS lub mają pewne ograniczenia bądź podlegają pewnym zasadom dotyczącym CSS. W niniejszej specyfikacji zostały one opisane w odniesieniu do CSS 2.1. [CSS21]

1.2. Terminologia

Całość niniejszego tekstu, z wyłączeniem przykładów, uwag i części oznaczonych jako nienormatywne, ma charakter normatywny.

W części Definicje specyfikacji [CSS21] znajdują się dodatkowe definicje terminów. Przykłady kodu źródłowego i fragmenty zostały napisane w języku XML [[XML10] lub HTML [[HTML40]].

1.3. Zmiany w stosunku do CSS 2

Ten podrozdział nie jest normatywny.

Najważniejsze różnice między selektorami CSS 2 i selektorami opisanymi w niniejszym dokumencie to:

  • została zmieniona lista podstawowych definicji (selektor, grupa selektorów, selektor prosty itd.). W szczególności to, co w CSS 2 było nazywane selektorem prostym, w tej specyfikacji jest nazywane sekwencją selektorów prostych, a termin „selektor prosty” oznacza teraz poszczególne elementy tej sekwencji.
  • zezwolono na stosowanie elementu przestrzeni nazw w selektorach typu, selektorze uniwersalnym i selektorach atrybutów
  • został dodany nowy kombinator
  • nowe selektory proste, w tym selektory atrybutów z dopasowywaniem części łańcuchów i nowe pseudoklasy
  • nowe pseudoelementy oraz wprowadzenie konwencji zapisu pseudoelementów przy użyciu notacji ze znakami „::”
  • została napisana gramatyka
  • profile do dodania do specyfikacji, w które wcielono selektory oraz zdefiniowano zestaw selektorów, które są rzeczywiście obsługiwane przez każdą specyfikację
  • selektory są teraz modułem CSS 3, a ich specyfikacja stanowi niezależny dokument; można się do niej odwoływać z innych specyfikacji niezależnie od CSS
  • specyfikacji towarzyszy dedykowany zestaw testów

2. Selektory

Niniejszy rozdział nie jest normatywny, ponieważ zawiera tylko streszczenie kolejnych rozdziałów.

Selektor reprezentuje pewną strukturę. Struktury tej można używać jako warunku (np. w regułach CSS) określającego, które elementy drzewa dokumentu zostaną wybrane do formatowania lub jako płaskiego opisu fragmentu kodu HTML lub XML odpowiadającego tej strukturze.

Selektory mogą być prostymi nazwami elementów, jak również złożonymi reprezentacjami zależności kontekstowych.

Poniższa tabela zawiera streszczenie składni selektorów:

WzorzecOpisOpisPierwsza definicja
*wszystkie elementySelektor uniwersalny2
Eelement typu ESelektor typu1
E[foo]element E z atrybutem „foo”Selektory atrybutu2
E[foo="bar"]element E, którego atrybut „foo” ma wartość „bar”Selektory atrybutu2
E[foo~="bar"]element E, którego atrybut „foo” ma listę wartości oddzielonych białymi znakami, z których jedna to „bar”Selektory atrybutu2
E[foo^="bar"]element E, którego atrybut „foo” ma wartość zaczynającą się od łańcucha „bar”Selektory atrybutu3
E[foo$="bar"]element E, którego atrybut „foo” ma wartość kończącą się łańcuchem „bar”Selektory atrybutu3
E[foo*="bar"]element E, którego atrybut „foo” ma wartość zawierającą podłańcuch „bar”Selektory atrybutu3
E[foo|="en"]elementu E, którego atrybut „foo” ma listę wartości oddzielanych łącznikami, z których pierwsza (od lewej) to „en”Selektory atrybutu2
E:rootelement E, element główny dokumentuPseudoklasy strukturalne3
E:nth-child(n)element E, n-te dziecko jego rodzicaPseudoklasy strukturalne3
E:nth-last-child(n)element E, n-te dziecko jego rodzica, licząc od końcaPseudoklasy strukturalne3
E:nth-of-type(n)element E, n-ty element siostrzany tego typuPseudoklasy strukturalne3
E:nth-last-of-type(n)element E, n-ty element siostrzany tego typu, licząc od końcaPseudoklasy strukturalne3
E:first-childelement E, pierwsze dziecko jego rodzicaPseudoklasy strukturalne2
E:last-childelement E, ostatnie dziecko jego rodzicaPseudoklasy strukturalne3
E:first-of-typeelement E, pierwszy element siostrzany tego typuPseudoklasy strukturalne3
E:last-of-typeelement E, ostatni element siostrzany tego typuPseudoklasy strukturalne3
E:only-childelement E, jedyne dziecko jego rodzicaPseudoklasy strukturalne3
E:only-of-typeelement E, jedyny element siostrzany tego typuPseudoklasy strukturalne3
E:emptyelement E, który nie ma dzieci (wliczając węzły tekstowe)Pseudoklasy strukturalne3
E:link
E:visited
element E będący kotwicą źródłową hiperłącza, którego punkt docelowy nie został jeszcze odwiedzony (:link) lub został już odwiedzony (:visited)Pseudoklasy łączy1
E:active
E:hover
E:focus
element E w czasie wykonywania przez użytkownika określonych działańPseudoklasy dotyczące działań użytkownika1 i 2
E:targetelement E będący celem identyfikatora URIPseudoklasa celu3
E:lang(fr)element typu E, jeśli element ten jest w języku „fr” (sposób określania języka zależy od języka dokumentu)Pseudoklasa :lang()2
E:enabled
E:disabled
należący do interfejsu użytkownika element E, który jest włączony lub wyłączonyPseudoklasy stanu elementów interfejsu użytkownika3
E:checkedelement E interfejsu użytkownika, który jest zaznaczony (np. przycisk radiowy lub pole wyboru)Pseudoklasy stanu elementów interfejsu użytkownika3
E::first-linepierwszy formatowany wiersz tekstu elementu EPseudoelement ::first-line1
E::first-letterpierwsza formatowana litera elementu EPseudoelement ::first-letter1
E::beforetreść generowana przed elementem EPseudoelement ::before2
E::aftertreść generowana za elementem EPseudoelement ::after2
E.warningelement E, którego klasa ma nazwę „warning” (sposób definiowania klas zależy od języka użytego do budowy dokumentu)Selektory klasy1
E#myidelement E o identyfikatorze „myid”.Selektory identyfikatora1
E:not(s)element E, który nie pasuje do selektora prostego sPseudoklasa negacji3
E Felement F będący potomkiem elementu EKombinator wyboru potomka1
E > Felement F będący dzieckiem elementu EKombinator wyboru dziecka2
E + Felement F, przed którym bezpośrednio znajduje się element EKombinator wyboru przylegającego elementu siostrzanego2
E ~ Felement F, przed którym znajduje się element EOgólny kombinator wyboru elementu siostrzanego3

Opis każdego z selektorów należy odczytywać dodając na początku słowo „Dopasowuje”.

3. Wielkość liter

Wielkość liter z zestawu ASCII nie jest rozpoznawana (tzn. przedziały [a-z] i [A-Z] są równoważne). Wyjątek stanowią te części, które nie podlegają specyfikacji selektorów. To, czy rozpoznawana jest wielkość liter w nazwach elementów języka dokumentu, nazwach atrybutów oraz wartościach atrybutów w selektorach zależy od języka dokumentu. Na przykład w języku HTML wielkość liter w nazwach elementów nie ma znaczenia, a w XML — ma. Kwestie dotyczące rozpoznawania wielkości liter w przedrostkach przestrzeni nazw są opisane w dokumencie [CSS3NAMESPACE].

4. Składnia selektorów

Selektor to ciąg składający się z jednej lub większej liczby sekwencji selektorów prostych oddzielonych kombinatorami. W selektorze może zostać użyty jeden pseudoelement, który może być dołączony do ostatniej sekwencji selektorów prostych w tym selektorze.

Sekwencja selektorów prostych to ciąg selektorów prostych, które nie są oddzielone kombinatorem. Sekwencja taka zawsze zaczyna się od selektora typu albo selektora uniwersalnego. W sekwencji może być tylko jeden selektor typu i selektor prosty.

Selektor prosty to selektor typu, selektor uniwersalny, selektor atrybutu, selektor klasy, selektor identyfikatora lub pseudoklasa.

Kombinatorami są: białe znaki, symbol większości (U+003E, >), znak plusa (U+002B, +) oraz tylda (U+007E, ~). Białe znaki mogą występować między kombinatorami a znajdującymi się wokół nich selektorami prostymi. Dozwolone są tylko następujące białe znaki: spacja (U+0020), tabulator (U+0009), znak nowego wiersza (U+000A), znak powrotu karetki (U+000D) oraz znak wysuwu strony (U+000C). Inne znaki podobne do spacji, takie jak długa spacja (ang. em-space — U+2003) i spacja ideograficzna (U+3000) nigdy nie są zaliczane do zestawu białych znaków.

Elementy drzewa dokumentu reprezentowane przez selektor nazywają się podmiotami selektora. Selektor składający się z jednej sekwencji selektorów prostych reprezentuje każdy element spełniający jego warunki. Dodanie przed sekwencją innej sekwencji selektorów prostych i kombinatora oznacza definicję dodatkowego warunku, w wyniku czego podmioty selektora są zawsze podzbiorem elementów reprezentowanych przez ostatnią sekwencję selektorów prostych.

Pusty selektor, nie zawierający żadnej sekwencji selektorów prostych i żadnego pseudoelementu, jest niepoprawnym selektorem.

Znaki w selektorach można zastępować sekwencjami zastępczymi z ukośnikiem zgodnie z zasadami stosowania sekwencji zastępczych w regułach używanymi w CSS. [CSS21].

W niektórych selektorach dozwolone jest używanie przedrostków oznaczających przestrzenie nazw. Sposób deklarowania przedrostków przestrzeni nazw powinien być określony w języku, w którym używane są selektory. Jeśli język nie określa sposobu deklarowania przedrostków przestrzeni nazw, to nie ma zadeklarowanych żadnych przedrostków. W CSS przedrostki przestrzeni nazw deklaruje się przy użyciu reguły @namespace. [CSS3NAMESPACE]

5. Grupy selektorów

Lista selektorów oddzielanych przecinkami reprezentuje sumę wszystkich elementów pasujących do każdego z tych selektorów z osobna. (Przecinek to znak o kodzie U+002C) Na przykład, jeśli kilka selektorów ma takie same deklaracje, można je zgrupować w postaci listy oddzielanej przecinkami. Przed i za przecinkiem mogą znajdować się białe znaki.

Przykład CSS:

W poniższym kodzie trzy reguły zawierające identyczne deklaracje zostały połączone w jedną. Zatem

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

jest równoważne z:

   h1, h2, h3 { font-family: sans-serif }

Ostrzeżenie: w tym przypadku trzy pierwsze reguły są równoważne z czwartą, ponieważ wszystkie selektory są poprawne. Gdyby nawet jeden z selektorów był niepoprawny, to cała grupa byłaby niepoprawna. Spowodowałoby to, że niepoprawna byłaby cała reguła dla wszystkich trzech nagłówków, natomiast w przypadku trzech indywidualnych reguł, niepoprawna byłaby tylko jedna z nich.

Przykład niepoprawnego kodu CSS:

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

To nie jest równoważne z:

h1, h2..foo, h3 { font-family: sans-serif }

ponieważ selektor h1, h2..foo, h3 jest w całości niepoprawny, przez co cała reguła zostanie odrzucona. (Gdyby selektory nie były zgrupowane, odrzucona zostałaby reguła z selektorem h2..foo)

6. Selektory proste

6.1. Selektor typu

Selektor typu stanowi nazwę typu elementów języka użytego do budowy dokumentu, zapisaną przy użyciu składni kwalifikowanych nazw CSS [CSS3NAMESPACE]. Selektor typu reprezentuje każde wystąpienie danego typu elementu w drzewie dokumentu.

Przykład:

Poniższa reguła reprezentuje element h1 w drzewie dokumentu:

h1

6.1.1. Selektory typu i przestrzenie nazw

W selektorach typu dozwolone jest stosowanie elementów określających przestrzeń nazw: na początku nazwy elementu można dołączyć wcześniej zadeklarowany przedrostek przestrzeni nazw, który należy oddzielić od tej nazwy separatorem przestrzeni nazw w postaci „pionowej kreski” (U+007C, |). (Zobacz np. dokument [XML-NAMES], w którym znajduje się opis przestrzeni nazw w języku XML)

Składnik przestrzeni nazw można pozostawić pusty (brak przedrostka przed separatorem przestrzeni nazw), aby zaznaczyć, że selektor reprezentuje elementy bez przestrzeni nazw.

Jako przedrostka przestrzeni nazw można także używać znaku gwiazdki, który oznacza, że selektor reprezentuje elementy wszystkich przestrzeni nazw (wliczając elementy nie należące do żadnej przestrzeni nazw).

Selektory typu elementu nie mające składnika przestrzeni nazw (bez separatora przestrzeni nazw) reprezentują elementy niezależnie od przestrzeni nazw (jest to równoważne z użyciem zapisu *|), chyba że została zadeklarowana domyślna przestrzeń nazw dla selektorów przypisanych do przestrzeni nazw (np. w CSS, w arkuszu stylów). Jeśli została zadeklarowana domyślna przestrzeń nazw, takie selektory będą reprezentowały tylko elementy w domyślnej przestrzeni nazw.

Selektor typu zawierający przedrostek przestrzeni nazw, która nie została wcześniej zadeklarowana dla selektorów przypisanych do przestrzeni nazw jest niepoprawnym selektorem.

W kliencie rozpoznającym przestrzenie nazw, część selektora typu elementu zawierająca nazwę (znajdująca się za separatorem przestrzeni nazw, jeśli separator ten jest użyty) jest dopasowywana tylko względem lokalnej części nazwy kwalifikowanej elementu.

Podsumowanie:

ns|E
elementy o nazwie W należące do przestrzeni nazw ns
*|E
elementy o nazwie E należące do dowolnej przestrzeni nazw, wliczając także te, które nie należą do żadnej przestrzeni nazw
|E
elementy o nazwie E nie należące do przestrzeni nazw
E
jeśli nie została zadeklarowana domyślna przestrzeń nazw dla selektorów, to zapis ten jest równoważny z *|E. W przeciwnym przypadku, jest równoznaczny z ns|E, gdzie ns jest domyślną przestrzenią nazw.

Przykłady CSS:

@przestrzeńnazw foo url(http://www.example.com);
 foo|h1 { color: blue }  /* pierwsza reguła */
 foo|* { color: yellow } /* druga reguła */
 |h1 { color: red }      /* ...*/
 *|h1 { color: green }
 h1 { color: green }

Pierwsza reguła (nie licząc reguły @namespace) znajdzie tylko elementy h1 należące do przestrzeni nazw „http://www.example.com”.

Druga reguła znajdzie wszystkie elementy należące do przestrzeni nazw „http://www.example.com”.

Trzecia reguła znajdzie tylko elementy h1 nie należące do żadnej przestrzeni nazw.

Czwarta reguła znajdzie elementy h1 należące do dowolnej przestrzeni nazw (wliczając te, które nie należą do żadnej przestrzeni nazw).

Ostatnia reguła jest równoważna z czwartą, ponieważ nie została zdefiniowana żadna domyślna przestrzeń nazw.

6.2.Selektor uniwersalny

Selektor uniwersalny, zapisany jako kwalifikowana nazwa CSS [CSS3NAMESPACE] z gwiazdką (* U+002A) jako nazwa lokalna, reprezentuje kwalifikowaną nazwę każdego typu elementów. Reprezentuje każdy pojedynczy element w drzewie dokumentu w każdej przestrzeni nazw (wliczając te, które nie należą do żadnej przestrzeni nazw), jeśli nie została określona żadna domyślna przestrzeń nazw dla selektorów. Jeśli domyślna przestrzeń nazw została określona, zobacz część Selektor uniwersalny i przestrzenie nazw poniżej.

Jeśli selektor uniwersalny reprezentowany przez znak * (tj. bez przedrostka określającego przestrzeń nazw) nie jest jedynym elementem sekwencji selektorów prostych lub bezpośrednio za nim znajduje się pseudoelement, to znak * może zostać opuszczony, ponieważ obecność selektora uniwersalnego w takich przypadkach jest domyślna.

Przykłady:

  • *[hreflang|=en] i [hreflang|=en] są równoważne,
  • *.warning i .warning są równoważne,
  • *#myid i #myid są równoważne.

Uwaga: zalecane jest nie opuszczanie znaku *, ponieważ jego obecność redukuje ryzyko pomyłki, np. zapisu div :first-child z div:first-child. W tym przypadku zapis div *:first-child jest bardziej czytelny.

6.2.1. Selektor uniwersalny i przestrzenie nazw

Selektor uniwersalny dopuszcza stosowanie elementu określającego przestrzeń nazw. Używa się go następująco:

ns|*
wszystkie elementy należące do przestrzeni nazw ns
*|*
wszystkie elementy
|*
wszystkie elementy nie należące do żadnej przestrzeni nazw
*
jeśli nie została określona żadna domyślna przestrzeń nazw, zapis ten jest równoważny z *|*. W przeciwnym przypadku jest równoważny z ns|*, gdzie ns to domyślna przestrzeń nazw.

Selektor uniwersalny zawierający przedrostek przestrzeni nazw, która nie została wcześniej zadeklarowana jest niepoprawnym selektorem.

6.3.Selektory atrybutu

Selektorów można używać do reprezentacji atrybutów elementów. Jeśli selektor jest użyty jako wyrażenie mające pasować do jakiegoś elementu, selektor atrybutu musi być uznany za pasujący do danego elementu, jeśli element ten ma atrybut odpowiadający atrybutowi reprezentowanemu przez ten selektor atrybutu.

6.3.1.Obecność atrybutów a selektory wartości

W CSS 2 wprowadzone zostały cztery selektory atrybutów:

[att]
Reprezentuje element mający atrybut att o dowolnej wartości.
[att=val]
Reprezentuje element mający atrybut att o wartości „val”.
[att~=val]
Reprezentuje element mający atrybut att, którego wartością jest lista słów oddzielanych białymi znakami, z których jedno to „val”. Jeśli „val” zawiera białe znaki, to niczego nie reprezentuje (ponieważ słowa są oddzielane spacjami). Ponadto, jeśli „val” jest pustym łańcuchem, również nic nie reprezentuje.
[att|=val]
Reprezentuje element mający atrybut att, którego wartość to „val” lub „val” ze znakiem „-” (U+002D). Dopuszczenie tego typu zapisu ma przede wszystkim na celu umożliwienie dopasowywania podkodów języka (np. atrybutu hreflang elementu a w języku HTML) zgodnie z opisem w dokumencie BCP 47 ([BCP47]) lub jego następcach. Aby uzyskać informacje na temat dopasowywania podkodów języka lang (lub xml:lang), zobacz część Pseudoklasa :lang.

Wartości atrybutów muszą być identyfikatorami lub łańcuchami CSS. [CSS21] To, czy w nazwach i wartościach atrybutów użytych w selektorach wielkość liter ma znaczenie, zależy od języka dokumentu.

Przykłady:

Poniższy selektor atrybutu reprezentuje element h1 zawierający atrybut title o dowolnej wartości:

h1[title]

W poniższym przykładzie selektor reprezentuje wszystkie elementy span, których atrybut class ma dokładnie wartość „example”:

span[class="example"]

Można użyć kilku selektorów atrybutu do reprezentowania kilku atrybutów elementu albo kilku warunków warunków dotyczących tego samego atrybutu. W tym przypadku selektor reprezentuje wszystkie elementy span, których atrybut hello ma dokładnie wartość „Cleveland” oraz którego atrybut goodbye ma dokładnie wartość „Columbus”:

span[hello="Cleveland"][goodbye="Columbus"]

Poniższe reguły CSS ilustrują różnicę między zapisami „=” i „~=”. Pierwszy selektor pasuje np. do elementu a, którego atrybut rel ma wartość „copyright copyleft copyeditor”. Natomiast drugi selektor pasowałby tylko do elementu a, którego atrybut href ma dokładnie wartość „http://www.w3.org/”.

a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }

Poniższy selektor reprezentuje element a, którego atrybut hreflang ma wartość „fr”.

a[hreflang=fr]

Poniższy selektor reprezentuje element a mający atrybut hreflang, którego wartość zaczyna się od ciągu znaków „en”, a więc brane są pod uwagę takie wartości, jak „en”, „en-US” oraz „en-scouse”:

a[hreflang|="en"]

Poniższe selektory reprezentują element DIALOGUE, jeśli ma atrybut character o jednej z dwóch wartości:

DIALOGUE[character=romeo]
DIALOGUE[character=juliet]

6.3.2.Selektory atrybutów dopasowujące części łańcuchów

Zostały utworzone trzy dodatkowe selektory pozwalające dopasowywać części łańcuchów w wartościach atrybutów:

[att^=val]
Reprezentuje element mający atrybut att, którego wartość zaczyna się od łańcucha „val”. Jeśli „val” jest pustym łańcuchem, to selektor ten nie reprezentuje niczego.
[att$=val]
Reprezentuje element mający atrybut att, którego wartość kończy się łańcuchem „val”. Jeśli „val” jest pustym łańcuchem, to selektor ten nie reprezentuje niczego.
[att*=val]
Reprezentuje element mający atrybut att, którego wartość zawiera przynajmniej jedno wystąpienie łańcucha „val”. Jeśli „val” jest pustym łańcuchem, to selektor ten nie reprezentuje niczego.

Wartości atrybutów muszą być identyfikatorami lub łańcuchami CSS. [CSS21] To, czy w nazwach atrybutów użytych w selektorach wielkość liter ma znaczenie, zależy od języka dokumentu.

Przykłady:

Poniższy selektor reprezentuje element object języka HTML, odwołujący się do obrazu:

object[type^="image/"]

Poniższy selektor reprezentuje kotwicę HTML a z atrybutem href o wartości zakończonej łańcuchem znaków „.html”.

a[href$=".html"]

Poniższy selektor reprezentuje akapit HTML z atrybutem title, którego wartość zawiera łańcuch „hello”

p[title*="hello"]

6.3.3. Selektory atrybutu i przestrzenie nazw

Nazwa atrybutu w selektorze atrybutu jest podawana jako nazwa kwalifikowana CSS: do nazwy atrybutu może być dołączony przedrostek wcześniej zadeklarowanej przestrzeni nazw, oddzielony od tej nazwy separatorem przestrzeni nazw w postaci „pionowej kreski” (|). Zgodnie z przestrzeniami nazw w rekomendacji języka XML, domyślne przestrzenie nazw nie mają zastosowania do atrybutów, a więc selektory atrybutów pozbawione komponentu przestrzeni nazw mają zastosowanie tylko do atrybutów nie mających przestrzeni nazw (równoważne z |attr; atrybuty te są określane jako „należące do partycji przestrzeni nazw typu per-element”). W miejscu przedrostka przestrzeni nazw można wstawić gwiazdkę, która będzie oznaczać, że selektor pasuje do wszystkich nazw atrybutów niezależnie od przestrzeni nazw.

Selektor atrybutu zawierający nazwę atrybutu z przedrostkiem przestrzeni nazw, która nie została wcześniej zadeklarowana jest niepoprawnym selektorem.

Przykłady CSS:

@przestrzennazw foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }

Pierwsza reguła sformatuje tylko elementy mające atrybut att należący do przestrzeni nazw „http://www.example.com” i o wartości „val”.

Druga reguła sformatuje tylko elementy z atrybutem att niezależnie od tego, do jakiej przestrzeni nazw atrybut ten jest przypisany (wliczając brak przestrzeni nazw).

Pozostałe dwie reguły są równoznaczne i formatują tylko elementy mające atrybut att nie przypisany do żadnej przestrzeni nazw.

6.3.4. Domyślne wartości atrybutów w dokumentach DTD

Selektory atrybutów reprezentują wartości atrybutów w drzewie dokumentu. Konstrukcja tego drzewa jest poza zakresem specyfikacji selektorów. W niektórych formatach dokumentów możliwe jest definiowanie w dokumentach DTD lub innych miejscach domyślnych wartości atrybutów. Dostęp do nich za pomocą selektorów atrybutów można uzyskać tylko, jeśli są one uwzględnione w drzewie dokumentu. Selektory powinny być tak zaprojektowane, aby działały niezależnie od tego, czy w drzewie dokumentu są wartości domyślne.

Na przykład aplikacja kliencka XML może, ale nie musi wczytać "zewnętrznego podzbioru" (external subset) DTD, ale musi poszukać domyślnych wartości atrybutów w „wewnętrznym podzbiorze” (internal subset) dokumentu. (Definicje tych podzbiorów znajdują się np. w [XML10].) W zależności od aplikacji klienckiej, domyślna wartość atrybutu, która jest zdefiniowana w zewnętrznym podzbiorze DTD, może być uwzględniona w drzewie dokumentu lub nie.

Aplikacja kliencka rozpoznająca jakąś przestrzeń nazw XML może, ale nie musi wykorzystywać tych informacji, aby traktować domyślne wartości atrybutów tak, jakby znajdowały się w dokumencie. (Na przykład aplikacja kliencka XHTML nie musi wykorzystywać swoich wbudowanych informacji na temat DTD XHTML. Zobacz np. dokument [XML-NAMES], w którym znajduje się opis przestrzeni nazw w języku XML 1.0)

Uwaga: Implementacje zwykle ignorują podzbiory zewnętrzne. Jest to związane z działaniem nie sprawdzających poprawności danych procesorów zdefiniowanych w specyfikacji języka XML.

Przykład:

Dany jest element o nazwie EXAMPLE, który ma atrybut radix o wartości domyślnej „decimal”. Odpowiadający mu fragment DTD mógłby wyglądać następująco:

<!ATTLIST EXAMPLE radix (decimal,octal) "decimal">

Jeśli arkusz stylów zawierałby poniższe reguły:

EXAMPLE[radix=decimal] { /*... domyślne ustawienia własności ...*/ }
EXAMPLE[radix=octal]   { /*... inne ustawienia...*/ }

pierwsza z nich może nie pasować do elementów, których atrybut radix ma wartość domyślną, tzn. nie został ustawiony bezpośrednio. Aby pokryć wszystkie przypadki, należy usunąć selektor atrybutu o wartości domyślnej:

EXAMPLE                { /*... domyślne ustawienia własności  ...*/ }
EXAMPLE[radix=octal]   { /*... inne ustawienia...*/ }

Dzięki temu, że selektor EXAMPLE[radix=octal] jest bardziej precyzyjny od samego selektora typu, deklaracje stylistyczne zawarte w drugiej regule przesłonią deklaracje pierwszej reguły w przypadku elementów, których atrybut radix ma wartość octal. Należy pamiętać, aby wszystkie deklaracje mające zastosowanie tylko do domyślnych przypadków zostały przesłonięte za pomocą reguł dotyczących pozostałych przypadków.

6.4. Selektory klas

Autorzy używający języka HTML mogą zastąpić notację ~= „kropką” (U+002E, znak .) do reprezentowania atrybutu class. Dla języka HTML selektory div.value i div[class~=value] są równoznaczne. Wartość atrybutu musi znajdować się bezpośrednio za kropką (.).

Aplikacje klienckie mogą stosować selektory przy użyciu notacji z kropką (.) w dokumentach XML pod warunkiem, że dysponują wiedzą dotyczącą przestrzeni nazw pozwalającą określić, który to jest atrybut „class” w danej przestrzeni nazw. Jednym z przykładów wiedzy na temat przestrzeni nazw jest treść specyfikacji określonej przestrzeni nazw (np. SVG 1.0 [SVG11] opisuje atrybut class języka SVG oraz wymagany sposób jego interpretacji; podobnie w MathML 1.01 [MATHML] znajduje się opis atrybutu class języka MathML.)

Przykłady CSS:

Aby przypisać styl wszystkim elementom z atrybutem class~="pastoral", można napisać następującą regułę:

*.pastoral { color: green }  /* Wszystkie elementy z atrybutem class~=pastoral */

lub prościej

.pastoral { color: green }  /* Wszystkie elementy z atrybutem class~=pastoral */

Poniższa reguła przypisuje styl tylko elementom H1 z atrybutem class~="pastoral":

H1.pastoral { color: green }  /* Elementy H1 z atrybutem class~=pastoral */

Zgodnie z tymi regułami, tekst pierwszego z poniższych elementów H1 nie byłby zielony, natomiast drugiego — tak:

<H1>Nie zielony</H1>
<H1 class="pastoral">Bardzo zielony</H1>

Poniższa reguła pasuje do każdego elementu P, którego atrybut class ma przypisaną listę wartości oddzielanych białymi znakami, wśród których znajdują się wartości pastoral i marine:

p.pastoral.marine { color: green }

Ta reguła pasuje do atrybutu class="pastoral blue aqua marine", ale nie do class="pastoral blue".

Uwaga: atrybut „class” w specyfikacji CSS otrzymał tak szeroki zakres możliwości, że w zasadzie możliwe jest zaprojektowanie własnego „języka dokumentu” przy użyciu elementów o bardzo ubogim zestawie cech prezentacyjnych (np. elementy DIV i SPAN języka HTML) i przez nadawanie im stylu za pomocą tego atrybutu. Należy wystrzegać się tego typu praktyk, ponieważ elementy strukturalne języka dokumentu są zwykle szeroko akceptowane i mają określone znaczenie, a klasy zdefiniowane przez użytkownika są tego pozbawione.

Uwaga: jeśli element ma kilka atrybutów klasy, ich wartości przed przystąpieniem do szukania klasy muszą zostać połączone spacjami. Aktualnie grupa robocza nie zna żadnego sposobu, w jaki taką sytuację można osiągnąć, dlatego zachowanie to jest w niniejszej specyfikacji nienormatywne.

6.5. Selektory identyfikatorów

Języki dokumentów mogą zawierać atrybuty, których zadeklarowanym typem jest identyfikator. Cechą charakterystyczną identyfikatorów jest to, że w dokumencie zgodnym ze specyfikacją może znajdować się tylko jeden taki atrybut o określonej wartości, niezależnie od typu elementu, do którego jest przypisany. Niezależnie od języka dokumentu, atrybut identyfikatora służy do jednoznacznego identyfikowania wybranego jednego elementu. W języku HTML wszystkie atrybuty typu identyfikatorowego nazywają się „id”. W aplikacjach XML mogą być używane inne nazwy, ale zasady ich stosowania pozostają te same.

Atrybut typu identyfikatorowego w języku dokumentu pozwala na przypisanie identyfikatora jednemu egzemplarzowi określonego elementu w drzewie dokumentu. Selektor identyfikatora CSS składa się ze znaku krzyżyka (U+0023, #), bezpośrednio po którym znajduje się wartość identyfikatora, która musi być identyfikatorem CSS. Selektor identyfikatora reprezentuje egzemplarz elementu mający przypisany taki sam identyfikator, jak identyfikator określony w tym selektorze.

Specyfikacja nie określa sposobu, w jaki aplikacja kliencka rozpoznaje atrybut typu identyfikatorowego. Aplikacja może np. odczytać DTD dokumentu, mieć takie informacje zakodowane na stałe lub spytać użytkownika.

Przykłady:

Poniższy selektor identyfikatora reprezentuje element h1, którego atrybut identyfikujący ma wartość „chapter1”:

h1#chapter1

Poniższy selektor identyfikatora reprezentuje każdy element, którego atrybut identyfikujący ma wartość „chapter1”:

#chapter1

Poniższy selektor identyfikatora reprezentuje każdy element, którego atrybut identyfikujący ma wartość „z98y”.

*#z98y

Uwaga: W języku XML 1.0 [XML10] informacja o tym, który atrybut zawiera identyfikator elementu znajduje się w dokumencie DTD lub schemacie. Aplikacje klienckie przetwarzające dokument XML nie zawsze odczytują dokument DTD, przez co mogą nie wiedzieć, co jest identyfikatorem elementu (aczkolwiek aplikacja kliencka może dysponować wiedzą dotyczącą przestrzeni nazw pozwalającą określić, który atrybut jest atrybutem identyfikacyjnym dla danej przestrzeni nazw). Jeśli autor arkusza stylów wie lub podejrzewa, że aplikacja kliencka może nie rozpoznać identyfikatora elementu, powinien w zamian używać normalnych selektorów atrybutów: [name=p371] zamiast #p371.

Jeśli element ma kilka atrybutów identyfikatora, wszystkie one muszą zostać potraktowane jako identyfikatory tego elementu na potrzeby selektora identyfikatora. Sytuację taką można spowodować mieszając wiedzę dotyczącej xml:id, DOM3 Core, DTD XML oraz przestrzeni nazw.

6.6.Pseudoklasy

Pseudoklasy mają na celu umożliwienie wyboru elementów na podstawie informacji, których nie ma w drzewie dokumentu lub których nie można wyrazić za pomocą innych selektorów prostych.

Każda pseudoklasa składa się z „dwukropka” (:) i nazwy, za którymi może być podana wartość w nawiasie.

Pseudoklas można używać we wszystkich łańcuchach selektorów prostych składających się na selektor. Pseudoklasy mogą znajdować się w każdym miejscu łańcucha selektorów prostych, za wiodącym selektorem typu lub selektorem uniwersalnym (ewentualnie opuszczonym). W nazwach pseudoklas nie jest rozróżniana wielkość liter. Niektóre pseudoklasy wykluczają się wzajemnie, podczas gdy inne można stosować jednocześnie wobec tego samego elementu. Pseudoklasy mogą być dynamiczne w takim sensie, że element może nabywać lub tracić pseudoklasę w wyniku działań użytkownika.

6.6.1. Dynamiczne pseudoklasy

Pseudoklasy dynamiczne klasyfikują elementy według kryteriów innych niż nazwa, atrybut lub treść. Zasadniczo są to takie cechy, których nie można wydedukować z drzewa dokumentu.

Pseudoklasy dynamiczne nie są obecne w źródle ani drzewie dokumentu.

Zwykle aplikacje klienckie łącza nieodwiedzone prezentują w inny sposób niż odwiedzone. Do ich rozróżniania w specyfikacji selektorów służą pseudoklasy :link i :visited:

  • Pseudoklasa :link odnosi się do jeszcze nie odwiedzonych łączy.
  • Pseudoklasa :visited ma zastosowanie do łączy, które zostały już odwiedzone przez użytkownika.

Po pewnym czasie aplikacja kliencka może przywrócić odwiedzone łącze do (nieodwiedzonego) stanu „:link”.

Te dwa stany wzajemnie się wykluczają.

Przykład:

Poniższy selektor reprezentuje łącza przypisane do klasy external, które zostały już odwiedzone:

a.external:visited

Uwaga:autorzy arkuszy stylów mogą wykorzystać pseudoklasy :link i :visited, aby dowiedzieć się bez zgody użytkownika, które strony on odwiedził.

Dlatego aplikacje klienckie mogą traktować wszystkie łącza jako nieodwiedzone lub mieć zaimplementowane inne zabezpieczenia prywatności związane z różnym formatowaniem odwiedzonych i nieodwiedzonych łączy.

6.6.1.2.Pseudoklasy dotyczące działań użytkownika: :hover, :active oraz :focus

Interaktywne aplikacje klienckie czasami zmieniają sposób prezentacji treści w odpowiedzi na działania użytkownika. W specyfikacji selektorów opisane są trzy pseudoklasy służące do wyboru elementu, na którym działa użytkownik.

  • Pseudoklasa :hover ma zastosowanie, gdy użytkownik wskaże jakiś element za pomocą urządzenia wskazującego, ale niekoniecznie go aktywuje. Na przykład wizualna aplikacja kliencka może zastosować tę pseudoklasę, gdy kursor (wskaźnik myszy) znajdzie się nad polem wygenerowanym przez element. Pseudoklasy tej nie muszą obsługiwać aplikacje klienckie nie obsługujące mediów interaktywnych. Niektóre zgodne aplikacje klienckie obsługujące media interaktywne mogą nie być w stanie obsłużyć tej pseudoklasy (np. pisak nie wykrywający zdarzenia najechania kursorem na element).
  • Pseudoklasa :active jest stosowana w odpowiedzi na aktywowanie elementu przez użytkownika. Dotyczy to np. czasu między naciśnięciem przycisku myszy i zwolnieniem go. W systemach zawierających więcej niż jeden przycisk myszy pseudoklasa :active ma zastosowanie tylko do przycisku głównego lub głównego przycisku aktywacyjnego (zazwyczaj jest to „lewy przycisk myszy”) i jego odpowiedników o innych nazwach.
  • Pseudoklasa :focus jest stosowana, gdy na elemencie jest ustawiony fokus (przyjmuje zdarzenia klawiatury lub myszy albo inne rodzaje danych wejściowych).

W językach dokumentów i implementacjach mogą istnieć ograniczenia dotyczące tego, dla których elementów można stosować pseudoklasy :active i :focus.

Pseudoklasy te nie wykluczają się wzajemnie. Element może pasować do kilku pseudoklas jednocześnie.

Specyfikacja selektorów nie określa czy rodzic elementu będącego w stanie :active lub :hover również się w tym stanie znajduje.

Uwaga: jeśli stan :hover jest zastosowany do elementu z powodu wyznaczenia za pomocą urządzenia wskazującego jego elementu potomnego, to istnieje możliwość, że stan :hover zostanie zastosowany do elementu, który nie znajduje się pod tym urządzeniem wskazującym.

Przykłady:

a:link    /* nieodwiedzone łącza */
a:visited /* odwiedzone łącza */
a:hover   /* użytkownik wskazał element */
a:active  /* aktywne łącza */

Przykład kombinacji dynamicznych pseudoklas:

a:focus
a:focus:hover

Ostatni z powyższych selektorów pasuje do elementów a będących w pseudoklasach :focus i :hover.

Uwaga: Element może być jednocześnie w stanie :visited i :active (lub :link i :active).

6.6.2. Pseudoklasa celu :target

Niektóre identyfikatory URI odnoszą się do konkretnych miejsc w określonym zasobie. Tego rodzaju identyfikatory URI zakończone są „znakiem krzyżyka” (#) i identyfikatorem kotwicy (zwanym identyfikatorem fragmentu).

Adresy URI z identyfikatorami fragmentów stanowią odnośniki do konkretnych elementów w dokumencie, które nazywają się elementami docelowymi. Poniżej znajduje się przykładowy identyfikator URI odnoszący się do kotwicy o nazwie section_2 znajdującej się w dokumencie HTML:

http://example.com/html/top.html#section_2

Do reprezentacji elementu docelowego służy pseudoklasa :target. Jeśli identyfikator URI dokumentu nie zawiera identyfikatora fragmentu, to znaczy, że dokument nie zawiera elementu docelowego.

Przykład:

p.note:target

Powyższy selektor reprezentuje element p należący do klasy note, który jest elementem docelowym identyfikatora URI.

Przykład CSS:

W tym przykładzie pseudoklasa :target została użyta do zmiany koloru tekstu elementu docelowego na czerwony i umieszczenia przed nim obrazu, jeśli taki istnieje:

*:target { color : red }
*:target::before { content : url(target.png) }

6.6.3. Pseudoklasa języka :lang

Jeśli język dokumentu definiuje sposób określania języka ludzkiego użytego w treści elementu, to można napisać selektory, które będą reprezentowały element na podstawie jego języka. Na przykład w języku HTML [HTML401] język określa się za pomocą kombinacji atrybutu lang i informacji z elementów meta lub protokołu (np. nagłówków HTTP). W języku XML istnieje atrybut o nazwie xml:lang, ale możliwe że w innych językach dokumentów mogą być zastosowane jeszcze jakieś inne metody określania języka.

Pseudoklasa :lang(C) reprezentuje element, którego treść jest w języku C. Gdy element jest reprezentowany przez :lang(), selektor bazuje wyłącznie na wartości języka tego elementu (w razie potrzeby znormalizowanej wg składni BCP 47) równej identyfikatorowi C lub zaczynającej się od identyfikatora C, bezpośrednio za którym znajduje się znak „-” (U+002D). Przy dopasowywaniu C do wartości języka elementu nie jest brana pod uwagę wielkość liter. Identyfikator C nie musi być poprawną nazwą języka.

C musi być poprawnym identyfikatorem [CSS21] CSS i nie może być pusty (w przeciwnym wypadku selektor jest niepoprawny).

Uwaga: zaleca się, aby w dokumentach i protokołach język był określany za pomocą kodów z dokumentu BCP 47 [BCP47] lub jego następcy. Dodatkowo w przypadku dokumentów XML [XML10] zaleca się, aby język określać za pomocą atrybutu „xml:lang”. Zobacz „FAQ: Dwuliterowe czy trzyliterowe kody języka”.

Przykłady:

Poniższe dwa selektory reprezentują dokumenty HTML, których treść jest napisana w języku francuskim używanym w Belgii lub niemieckim: Następne dwa selektory reprezentują cytaty q znajdujące się w dowolnym elemencie, którego treść jest napisana w języku francuskim używanym w Belgii lub niemieckim:

html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q

Różnica między operatorem :lang(C), a „|=” polega na tym, że operator „|=” dokonuje porównania tylko z danym atrybutem elementu, natomiast pseudoklasa :lang(C) wykorzystuje wiedzę aplikacji klienckiej na temat semantyki dokumentu w celu dokonania porównania.

W poniższym przykładzie kodu HTML tylko element BODY pasuje do [lang|=fr] (ponieważ ma atrybut LANG), ale zarówno element BODY jak i P pasują do :lang(fr) (ponieważ oba są po francusku). Element P nie pasuje do [lang|=fr], ponieważ nie ma atrybutu LANG.

<body lang=fr>
  <p>Je suis français.</p>
</body>

6.6.4. Pseudoklasy stanu elementów interfejsu użytkownika

6.6.4.1. Pseudoklasy :enabled i :disabled

Pseudoklasa :enabled reprezentuje te elementy interfejsu użytkownika, które są w stanie włączonym; elementy takie mają także odpowiedni stan wyłączenia.

Natomiast pseudoklasa :disabled reprezentuje te elementy interfejsu użytkownika, które są w stanie wyłączonym; elementy takie mają także odpowiedni stan włączenia.

Definicje stanów włączenia i wyłączenia oraz elementu interfejsu użytkownika są zależne od języka. W typowym dokumencie większość elementów nie znajduje się ani w stanie :enabled ani :disabled.

Uwaga: Własności CSS mogące wpływać na możliwość interakcji użytkownika z danym elementem interfejsu użytkownika nie mają wpływu na to, czy element ten pasuje do pseudoklasy :enabled lub :disabled; np. własności display i visibility nie mają żadnego wpływu na stany włączenia i wyłączenia elementów.

6.6.4.2. Pseudoklasa :checked

Przyciski radiowe i pola wyboru to elementy, które mogą być włączane i wyłączane przez użytkownika. Niektóre elementy menu zostają w wyniku wyboru „zaznaczone”. Gdy elementy takie zostaną „włączone”, ma zastosowanie do nich pseudoklasa :checked. Ponieważ pseudoklasa :checked jest z natury dynamiczna i jej stosowanie jest zależne od działań użytkownika, ponieważ może być także zależna od obecności w dokumencie atrybutów semantycznych, ma zastosowanie do wszystkich mediów. Na przykład początkowo pseudoklasa :checked ma zastosowanie do tych elementów, które mają atrybuty języka HTML 4 selected i checked opisane w ustęp 17.2.1 specyfikacji HTML 4, ale użytkownik może oczywiście te elementy „wyłączyć”, co spowoduje, że pseudoklasa :checked nie będzie już miała do nich zastosowania.

6.6.4.3. Pseudoklasa :indeterminate

Uwaga: przyciski radiowe i pola wyboru mogą być włączane i wyłączane przez użytkownika, ale czasami mogą być też w stanie nieokreślonym, tzn. ani zaznaczone, ani nie niezaznaczone. Może to być spowodowane przez atrybut elementu albo manipulację modelem DOM.

W przyszłej wersji tej specyfikacji może zostać wprowadzona pseudoklasa :indeterminate, która będzie odnosiła się do takich elementów.

6.6.5.Pseudoklasy strukturalne

W niniejszej specyfikacji zostało wprowadzone pojęcie pseudoklas strukturalnych, które umożliwiają dokonywanie wyboru elementów na podstawie dodatkowych informacji dostępnych w drzewie dokumentu, ale których nie da się reprezentować przy użyciu innych selektorów prostych i kombinatorów.

Samodzielny tekst i inne węzły nie będące elementami nie są brane pod uwagę podczas obliczania pozycji elementu na liście dzieci zawierającego go rodzica. Przy obliczaniu pozycji elementu na liście dzieci rodzica numerowanie indeksów zaczyna się od 1.

6.6.5.1. Pseudoklasa :root

Pseudoklasa :root reprezentuje element będący korzeniem dokumentu. W języku HTML 4 korzeniem zawsze jest element HTML.

6.6.5.2.Pseudoklasa :nth-child()

Pseudoklasa :nth-child(an+b) reprezentuje element, przed którym w drzewie dokumentu znajduje się an+b-1 elementów siostrzanych, dla dowolnej dodatniej lub zerowej liczby całkowitej n, i który ma element nadrzędny. Dla wartości a i b większych od zera oznacza to w istocie podział dzieci elementu na grupy a elementów (ostatnia grupa zawiera resztę) i wybór b-tego elementu z każdej grupy. Dzięki temu za pomocą selektorów można wybrać co drugi wiersz tabeli albo zmienić kolor tekstu w co czwartym akapicie. Wartości a i b muszą być liczbami całkowitymi (dodatnimi, ujemnymi lub równe zero). Indeks pierwszego elementu dziecka ma numer 1.

Dodatkowo pseudoklasa :nth-child() może przyjmować argumenty „odd” i „even”. ‘odd” ma takie same znaczenie, co 2n+1, a „even” jest równoważny z 2n.

Argument przekazywany pseudoklasie :nth-child() musi być zgodny z regułami gramatyki przedstawionej poniżej, gdzie INTEGER oznacza tokeny [0-9]+, a pozostałe tokeny są określone przez Skaner leksykalny w ustępie 10.2:

nth
  : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
         ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
  ;

Przykłady:

tr:nth-child(2n+1) /* reprezentuje nieparzyste wiersze tabeli HTML */
tr:nth-child(odd)  /* to samo */
tr:nth-child(2n+0) /* reprezentuje parzyste wiersze tabeli HTML */
tr:nth-child(even) /* to samo */

/* Kolorowanie akapitów za pomocą CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

Jeśli przed wartością b znajduje się znak odejmowania, znak „+” musi z wyrażenia zostać usunięty (jest zastępowany przez znak „-”, który oznacza ujemną wartość b).

Przykłady:

:nth-child(10n-1)  /* reprezentuje 9., 19., 29. element itd. */
:nth-child(10n+9)  /* to samo */
:nth-child(10n+-1) /* Niepoprawne składniowo i zostanie zignorowane */

Gdy a=0, część an można opuścić (chyba, że opuszczono już część b). Gdy część an jest opuszczona i b nie ma wartości ujemnej, znak + przed b (gdy jest to dozwolone) również można opuścić. W takim przypadku składnia zostaje uproszczona do postaci :nth-child(b).

Przykłady:

foo:nth-child(0n+5)   /* reprezentuje element foo będący piątym dzieckiem
                         swojego rodzica */
foo:nth-child(5)      /* to samo */

Gdy a=1 lub a=-1, liczbę tę można w regule opuścić.

Przykłady:

Poniższe selektory są równoważne:

bar:nth-child(1n+0)   /* reprezentuje wszystkie elementy bar, precyzja (0,1,1) */
bar:nth-child(n+0)    /* to samo */
bar:nth-child(n)      /* to samo */
bar                   /* to samo, ale niższa precyzja (0,0,1) */

Jeśli b=0, to wybierany jest co a-ty element. W takim przypadku, część +b (lub –b) można opuścić, pod warunkiem, że nie została już opuszczona część a.

Przykłady:

tr:nth-child(2n+0) /* reprezentuje parzyste wiersze tabeli HTML */
tr:nth-child(2n) /* to samo */

Po znaku „(”, przed znakiem „)” i po obu stronach znaków „+” i „-” mogą znajdować się białe znaki rozdzielające części an i b, gdy żadna z nich nie została pominięta.

Poprawne przykłady użycia białych znaków:

:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )

Przykłady niepoprawnego użycia białych znaków:

:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)

Jeśli zarówno a i b mają wartość, to pseudoklasa nie reprezentuje żadnego elementu w drzewie dokumentu.

Wartość a może być ujemna, ale tylko dodatnie wartości an+b, dla n?0, mogą reprezentować elementy w drzewie dokumentu.

Przykład:

html|tr:nth-child(-n+6)  /* reprezentuje sześć pierwszych wierszy tabel XHTML */
6.6.5.3.Pseudoklasa :nth-last-child()

Pseudoklasa :nth-last-child(an+b) reprezentuje element, za którym w drzewie dokumentu znajduje się an+b-1 elementów siostrzanych, dla dowolnej dodatniej lub zerowej wartości n, i który ma element nadrzędny. Zobacz pseudoklasę :nth-child(), aby przeczytać opis składni jej argumentu. Jako argumenty dozwolone są również wartości „even” i „odd”.

Przykłady:

tr:nth-last-child(-n+2)    /* reprezentuje dwa ostatnie wiersze tabeli HTML */

foo:nth-last-child(odd)    /* reprezentuje wszystkie nieparzyste elementy foo w ich elemencie nadrzędnym,
                              licząc od ostatniego */
6.6.5.4.Pseudoklasa :nth-of-type()

Pseudoklasa :nth-of-type(an+b) reprezentuje element, przed którym w drzewie dokumentu znajduje się an+b-1 elementów siostrzanych o takiej samej rozwiniętej nazwie, dla dowolnej dodatniej lub zerowej wartości całkowitej n, i który ma element nadrzędny. Zobacz pseudoklasę :nth-child(), aby przeczytać opis składni jej argumentu. Dozwolone są również wartości „even” i „odd”.

Przykład CSS:

Zmienianie położenia pływających obrazów:

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
6.6.5.5.Pseudoklasa :nth-last-of-type()

Pseudoklasa :nth-last-of-type(an+b) reprezentuje element, po którym w drzewie dokumentu znajduje się an+b-1 elementów siostrzanych o takiej samej rozwiniętej nazwie, dla dowolnej dodatniej lub zerowej wartości całkowitej n, i który ma element nadrzędny. Zobacz pseudoklasę :nth-child(), aby przeczytać opis składni jej argumentu. Dozwolone są również wartości „even” i „odd”.

Przykład:

Aby wybrać wszystkie elementy dzieci h2 elementu body w dokumencie XHTML, z wyjątkiem pierwszego i ostatniego, można użyć następującego selektora:

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

W przypadku tym można również użyć selektora :not(), ale kod byłby tak samo długi:

body > h2:not(:first-of-type):not(:last-of-type)
6.6.5.6.Pseudoklasa :first-child

To samo, co :nth-child(1). Pseudoklasa :first-child reprezentuje element będący pierwszym dzieckiem innego elementu.

Przykłady:

Poniższy selektor reprezentuje element p będący pierwszym dzieckiem elementu div:

div > p:first-child

Selektor ten może reprezentować element p wewnątrz elementu div w poniższym fragmencie dokumentu:

<p> Ostatni akapit przed uwagą.</p>
<div class="note">
   <p> Pierwszy akapit w uwadze.</p>
</div>
Nie reprezentowałby natomiast drugiego elementu p w poniższym przykładzie:
<p> Ostatni akapit przed uwagą.</p>
<div class="note">
   <h2> Uwaga </h2>
   <p> Pierwszy akapit w uwadze.</p>
</div>

Poniższe dwa selektory są zazwyczaj równoważne:

* > a:first-child /* a jest pierwszym dzieckiem dowolnego elementu */
a:first-child /* to samo (pod warunkiem, że a nie jest elementem głównym) */
6.6.5.7.Pseudoklasa :last-child

To samo, co :nth-last-child(1). Pseudoklasa :last-child reprezentuje element będący ostatnim dzieckiem innego elementu.

Przykład:

Poniższy selektor reprezentuje element listy li będący ostatnim dzieckiem uporządkowanej listy ol.

ol > li:last-child
6.6.5.8.Pseudoklasa :first-of-type

To samo, co :nth-of-type(1). Pseudoklasa :first-of-type reprezentuje element będący pierwszym elementem siostrzanym danego typu na liście dzieci swojego rodzica.

Przykład:

Poniższy selektor reprezentuje tytuł definicji dt wewnątrz listy definicji dl, który to element dt jest pierwszym elementem tego typu na liście dzieci tego elementu nadrzędnego.

dl dt:first-of-type

Opis ten dotyczy dwóch pierwszych elementów dt w poniższym fragmencie, ale nie trzeciego:

<dl>
 <dt>gigogne</dt>
 <dd>
  <dl>
   <dt>fusée</dt>
   <dd>multistage rocket</dd>
   <dt>table</dt>
   <dd>nest of tables</dd>
  </dl>
 </dd>
</dl>
6.6.5.9.Pseudoklasa :last-of-type

To samo, co :nth-last-of-type(1). Pseudoklasa :last-of-type reprezentuje element będący ostatnim elementem siostrzanym danego typu na liście dzieci swojego rodzica.

Przykład:

Poniższy selektor reprezentuje ostatnią komórkę td wiersza tabeli tr.

tr > td:last-of-type
6.6.5.10.Pseudoklasa :only-child

Reprezentuje element mający rodzica, który to rodzic nie zawiera żadnych innych elementów dzieci. To samo, co :first-child:last-child i :nth-child(1):nth-last-child(1), ale o niższej precyzji.

6.6.5.11.Pseudoklasa :only-of-type

Reprezentuje element mający rodzica, który to rodzic nie zawiera żadnych innych elementów dzieci o takiej samej rozwiniętej nazwie. To samo, co :first-of-type:last-of-type i :nth-of-type(1):nth-last-of-type(1), ale o niższej precyzji.

6.6.5.12.Pseudoklasa :empty

Pseudoklasa :empty reprezentuje element, który nie ma dzieci. W kategoriach drzewa dokumentu wpływ na to czy element jest pusty, czy niepusty mogą mieć tylko węzły elementów i treści (np. węzły tekstowe DOM [DOM-LEVEL-3-CORE], węzły CDATA i odwołania do encji), których dane mają rozmiar powyżej zera; komentarze, instrukcje przetwarzania i pozostałe węzły nie powinny mieć na to wpływu.

Przykłady:

p:empty jest poprawną reprezentacją poniższego fragmentu:

<p></p>

foo:empty nie jest poprawną reprezentacją poniższych fragmentów:

<foo>bar</foo>
<foo><bar>bla</bar></foo>
<foo>ten nie jest <bar>:empty</bar></foo>

6.6.6.Pusta część

Ten podrozdział został celowo pozostawiony pusty. (Wcześniej zawierał definicję pseudoklasy :contains().)

6.6.7. Pseudoklasa negacji

Pseudoklasa negacji :not(X) to notacja funkcyjna przyjmująca jako argument selektor prosty (z wyłączeniem samej pseudoklasy negacji). Reprezentuje element, który nie jest reprezentowany przez jej argument.

Negacje można zagnieżdżać, a więc zapis :not(:not(...)) jest poprawny. Należy nadto podkreślić, że pseudoelementy nie będąc selektorami prostymi nie są poprawnymi argumentami pseudoklasy :not().

Przykłady:

Poniższy selektor pasuje do wszystkich elementów button w dokumencie HTML, które nie są wyłączone.

button:not([DISABLED])

Poniższy selektor reprezentuje wszystko oprócz elementów FOO.

*:not(FOO)

Poniższa grupa selektorów reprezentuje wszystkie elementy HTML z wyjątkiem łączy.

html|*:not(:link):not(:visited)

Domyślne deklaracje przestrzeni nazw nie mają wpływu na argument pseudoklasy negacji, chyba że argumentem tym jest selektor uniwersalny lub selektor typu.

Przykłady:

Przyjmując, że domyślna przestrzeń nazw jest związana z adresem „http://example.com/”, poniższy selektor reprezentuje wszystkie elementy nie należące do tej przestrzeni:

*|*:not(*)

Poniższy selektor pasuje do każdego elementu, nad którym nie ma kursora, niezależnie od przestrzeni nazw, do której należy. W szczególności nie ogranicza się to tylko do dopasowywania elementów należących do domyślnej przestrzeni nazw, nad którymi nie ma kursora. Elementy nie należące do domyślnej przestrzeni nazw nie pasują do tej reguły, gdy znajduje się nad nimi kursor.

*|*:not(:hover)

Uwaga: pseudoklasa :not() umożliwia pisane bezużytecznych selektorów. Na przykład :not(*|*), nie reprezentujący żadnego elementu albo foo:not(bar), który jest równoznaczny z foo, ale ma wyższą precyzję.

7.Pseudoelementy

Pseudoelementy tworzą abstrakcje dotyczące drzewa dokumentu, nie należące do informacji dostarczanych przez język dokumentu. Na przykład języki dokumentu nie udostępniają żadnego mechanizmu pozwalającego uzyskać dostęp do pierwszej litery lub pierwszego wiersza treści elementu. Pseudoelementy CSS umożliwiają odwoływanie się do tych niedostępnych w inny sposób informacji. Pseudoelementy mogą także umożliwiać uzyskanie dostępu do treści, która nie istnieje w dokumencie źródłowym (np. pseudoelementy ::before i ::after udostępniają treść generowaną).

Pseudoelement składa się z dwóch dwukropków (::), za którymi znajduje się jego nazwa.

Notacja ta (::) została wprowadzona w niniejszym dokumencie w celu odróżnienia pseudoklas od pseudoelementów. Jednak dla zachowania zgodności z istniejącymi arkuszami stylów aplikacje klienckie muszą także akceptować starą notację wprowadzoną w CSS 1 i 2 (tzn. :first-line, :first-letter, :before oraz :after). Opisana zasada zgodności nie może być zachowana dla nowych pseudoelementów, które zostały wprowadzone w niniejszej specyfikacji.

W selektorze może znajdować się tylko jeden pseudoelement i jeśli zostanie użyty, to musi znajdować się za sekwencją selektorów prostych reprezentujących podmioty selektora.

w przyszłych wersjach niniejszej specyfikacji może zostać wydane zezwolenie na używanie kilku pseudoelementów w jednym selektorze.

7.1. Pseudoelement ::first-line

Pseudoelement ::first-line opisuje zawartość pierwszego formatowanego wiersza elementu.

Przykład CSS:

p::first-line { text-transform: uppercase }

Powyższą regułę należy czytać: „zamień litery w pierwszym wierszu każdego elementu p na ich wielkie odpowiedniki”.

Selektor p::first-line nie pasuje do żadnego realnego elementu dokumentu. Pasuje do pseudoelementu, który aplikacje klienckie spełniające wymogi Specyfikacji wstawią na początku każdego elementu p.

Należy nadmienić, że długość pierwszego wiersza zależy od kilku czynników, takich jak np. szerokość strony, rozmiar pisma itp. Zatem dla poniższego zwykłego akapitu HTML:

<P>To jest dość długi akapit HTML, 
który zostanie podzielony na kilka 
wierszy. Pierwszy wiersz zostanie oznaczony
przez fikcyjne znaczniki. Pozostałe wiersze 
zostaną potraktowane jako zwykłe linie tekstu 
w akapicie.</P>

wiersze mogą zostać podzielone np. tak:

TO JEST DOŚĆ DŁUGI AKAPIT HTML, KTóRY
zostanie podzielony na kilka wierszy. Pierwszy
wiersz zostanie oznaczony przez fikcyjne 
znaczniki. Pozostałe wiersze zostaną potraktowane jako 
zwykle linie tekstu akapitu.

Aplikacje klienckie mogą „przepisać” ten akapit dodając do niego fikcyjne znaczniki dla pseudoelementu ::first-line. Te fikcyjne znaczniki pomagają w zademonstrowaniu dziedziczenia własności.

<P><P::first-line> To jest dość długi akapit 
HTML, który </P::first-line> zostanie podzielony na kilka
wierszy. Pierwszy wiersz zostanie oznaczony 
przez fikcyjne znaczniki. Pozostałe wiersze 
zostaną potraktowane jako zwykłe linie tekstu 
w akapicie.</P>

Jeśli pseudoelement dzieli na części rzeczywisty element, żądany efekt często można opisać w ten sposób, że fikcyjne znaczniki zamykają i ponownie otwierają ten element. Jeśli zatem do powyższego akapitu zostanie dodany elementem span:

<P><SPAN class="test"> To jest dość długi akapit
który zostanie podzielony na kilka
wierszy.</SPAN> Pierwszy wiersz zostanie oznaczony
przez fikcyjne znaczniki. Pozostałe wiersze 
zostaną potraktowane jako zwykłe linie tekstu 
w akapicie.</P>

aplikacja kliencka podczas tworzenia fikcyjnych znaczników dla pseudoelementu ::first-line może wstawić symulowane znaczniki początku i końca elementu span.

<P><P::first-line><SPAN class="test"> To jest
dość długi akapit
HTML, który </SPAN></P::first-line><SPAN class="test"> zostanie
podzielony na kilka
wierszy.</SPAN> Pierwszy wiersz zostanie oznaczony
przez fikcyjne znaczniki. Pozostałe wiersze
zostaną potraktowane jako zwykłe linie tekstu 
w akapicie.</P>

7.1.1.Definicja CSS pierwszego formatowanego wiersza

W CSS pseudoelement ::first-line ma zastosowanie tylko do kontenerów blokowych, takich jak pola blokowe, bloki śródliniowe oraz podpisy i komórki tabel.

Pierwszy formatowany wiersz elementu może wystąpić w blokowym potomku w tym samym układzie (tzn. blokowym potomku, który nie jest wyjęty z normalnego układu z powodu pływania lub pozycjonowania). Na przykład pierwszy wiersz elementu DIV w kodzie <DIV><P>To jest wiersz...</P></DIV> jest pierwszym wierszem elementu P (przy założeniu, że zarówno P jak i DIV to elementy blokowe).

Pierwszy wiersz komórki tabeli lub elementu typu inline-block nie może być pierwszym formatowanym wierszem elementu przodka. Zatem w kodzie <DIV><P STYLE="display: inline-block">Witam<BR>Żegnam</P> i tak dalej</DIV> pierwszym formatowanym wierszem elementu DIV nie jest „Witam”.

Uwaga: Należy zauważyć, że pierwszy wiersz elementu p we fragmencie: <p><br>Pierwszy... nie zawiera żadnych liter (przyjmując domyślny styl elementu br w języku HTML 4). Słowo „Pierwszy” nie znajduje się w pierwszym formatowanym wierszu.

Aplikacje klienckie muszą zachowywać się tak, jakby fikcyjne znaczniki otwierające pseudoelementów ::first-line były zagnieżdżone w najgłębiej położonym zawierającym elemencie blokowym. (Ponieważ w specyfikacjach CSS 1 i CSS 2 nie napisano nic na ten temat, nie należy na tym polegać.) Na przykład sekwencja fikcyjnych znaczników dla kodu

<DIV>
  <P>Pierwszy akapit</P>
  <P>Drugi akapit</P>
</DIV>

to

<DIV>
  <P><DIV::first-line><P::first-line>Pierwszy akapit</P::first-line></DIV::first-line></P>
  <P><P::first-line>Drugi akapit</P::first-line></P>
</DIV>

Pseudoelement ::first-line jest podobny do elementu śródliniowego z pewnymi ograniczeniami. Do pseudoelementu ::first-line mają zastosowanie następujące własności CSS: własności pisma, własność koloru, własności tła, „word-spacing”, „letter-spacing”, „text-decoration”, „vertical-align”, „text-transform”, „line-height”. Aplikacje klienckie mogą stosować również inne własności.

Zgodnie z zasadami dziedziczenia CSS ta część elementu dziecka, która znajduje się w pierwszym wierszu dziedziczy tylko te własności, które mają zastosowanie do pseudoelementu ::first-line z pseudoelementu ::first-line. Dla wszystkich pozostałych własności dziedziczenie odbywa się z nie będącego pseudoelementem rodzica pseudoelementu pierwszego wiersza. (Część elementu dziecka, która nie znajduje się w pierwszym wierszu zawsze dziedziczy po rodzicu tego elementu dziecka).

7.2. Pseudoelement ::first-letter

Pseudoelement ::first-letter reprezentuje pierwszą literę elementu, jeśli nie ma przed nią w tym samym wierszu żadnej innej treści (np. obrazów lub tabeli śródliniowych). Pseudoelement ::first-letter może być używany do tworzenia popularnych efektów typograficznych zwanych inicjałami (ang. drop cap lub initial cap).

Znaki przestankowe (tzn. znaki zdefiniowane w Unicode w klasach „open” (Ps), „close” (Pe), „initial” (Pi), „final” (Pf) oraz „other” (Po)), znajdujące się przed lub za pierwszą literą powinny być uwzględniane. [UNICODE]

Pseudoelement ::first-letter ma także zastosowanie do cyfr, np. do „6” w zdaniu „67 milionów dolarów to dużo pieniędzy”.

Uwaga: w niektórych przypadkach pseudoelement ::first-letter powinien obejmować więcej niż tylko pierwszy nie będący przestankowym znak w wierszu. Na przykład znaki składowe powinny zostać razem ze swoim znakiem bazowym. Ponadto w niektórych językach mogą istnieć szczegółowe zasady dotyczące traktowania określonych kombinacji liter. Definicja pseudoelementu ::first-letter w aplikacjach klienckich powinna przynajmniej zawierać domyślną grupę grafemów zdefiniowany w dokumencie UAX29 i mogą zawierać więcej, jeśli jest taka potrzeba. Na przykład w języku holenderskim kombinacja liter "ij" znajdująca się na początku słowa powinna być traktowana przez pseudoelement ::first-letter jako jedna litera. [UAX29]

Jeśli litery, które powinny tworzyć zawartość pseudoelementu ::first-letter znajdują się w różnych elementach, np. „T” w <p>'<em>T..., aplikacja kliencka może utworzyć pseudoelement ::first-letter z jednego z tych elementów, z obu tych elementów lub w ogóle nie utworzyć pseudoelementu.

Analogicznie, jeśli pierwsza litera (lub pierwsze litery) bloku nie znajdują się na początku wiersza (np. ze względu na zmianę kolejności słów w tekstach dwukierunkowych), aplikacja kliencka nie musi tworzyć pseudoelementów.

Przykład:

Poniższy przykład kodu CSS i HTML ilustruje możliwą interakcję nachodzących na siebie pseudoelementów. Pierwsza litera każdego elementu P będzie zielona i napisana pismem o rozmiarze „24pt”. Reszta pierwszego formatowanego wiersza będzie niebieska (blue), podczas gdy reszta akapitu będzie czerwona (red).

p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }

<P>Trochę tekstu, który mieści się w dwóch wierszach</P>

Przyjmując, że złamanie wiersza nastąpi przed słowem „mieści”, fikcyjna sekwencja znaków dla tego elementu może wyglądać następująco:

<P>
<P::first-line>
<P::first-letter> 
T 
</P::first-letter>rochę tekstu, który 
</P::first-line> 
mieści się w dwóch wierszach. 
</P>

Należy zauważyć, że element ::first-letter znajduje się wewnątrz elementu ::first-line. Własności zdefiniowane dla pseudoelementu ::first-line dziedziczone są przez pseudoelement ::first-letter, ale są przesłaniane, jeśli taka sama własność zostanie zdefiniowana bezpośrednio dla pseudoelementu ::first-letter.

Pierwsza litera musi znajdować się w pierwszym formatowanym wierszu. Na przykład w poniższym fragmencie kodu HTML: <p><br>Pierwsza... pierwszy wiersz nie zawiera żadnej litery i pseudoelement ::first-letter nie pasuje tu do niczego (przyjmując domyślny styl elementu br języka HTML 4). Mówiąc dokładniej, nie dopasuje litery „P” w wyrazie "Pierwsza".

7.2.1.Zastosowanie w CSS

W CSS pseudoelement ::first-letter ma zastosowanie do kontenerów blokowych, takich jak bloki, komórki tabel, podpisy tabel oraz bloki śródliniowe (inline-block).

Uwaga: możliwe, że w przyszłych wersjach niniejszej specyfikacji pseudoelement ten będzie mógł mieć zastosowanie do większej liczby typów.

Pseudoelementu ::first-letter można używać z wszystkimi elementami, które zawierają tekst lub które mają potomka w tym samym układzie zawierającego tekst. Aplikacja kliencka powinna zachowywać się tak, jakby fikcyjny znacznik otwierający pseudoelementu ::first-letter znajdował się bezpośrednio przed pierwszym tekstem elementu, nawet jeśli tekst ten znajduje się dopiero w elemencie potomnym.

Przykład:

Fikcyjna sekwencja znaczników dla poniższego dokumentu HTML:

<div>
<p>Pierwszy tekst.

wygląda następująco:

<div>
<p><div::first-letter><p::first-letter>P</...></...>ierwszy tekst.

Pierwsza litera komórki tabeli lub elementu typu inline-block nie może być pierwszą literą elementu przodka. Zatem w kodzie <DIV><P STYLE="display: inline-block">Witam<BR>Żegnam</P> itakdalej</DIV> pierwszą literą elementu DIV nie jest „W”. W istocie ten element DIV nie ma pierwszej litery.

Jeśli element jest elementem listy („display: list-item”), to pseudoelement ::first-letter ma zastosowanie do pierwszej litery w głównym polu za oznakowaniem. Aplikacje klienckie mogą zignorować pseudoelement ::first-letter w elementach listy, jeśli elementy te mają zdefiniowaną własność „list-style-position: inside”. Jeśli element ma treść ::before lub ::after, pseudoelement ::first-letter ma zastosowanie do pierwszej litery tego elementu z uwzględnieniem tej treści.

Przykład:

Gdy zostanie zastosowana reguła p::before {content: "Uwaga: "}, selektor p::first-letter spowoduje sformatowanie litery „U” wyrazu „Uwaga”.

Pseudoelement ::first-line w CSS jest podobny do elementu śródliniowego, jeśli jego własność „float” jest ustawiona na „none”. W pozostałych przypadkach jest podobna do elementów pływających. Do pseudoelementu ::first-letter mają zastosowanie następujące własności: własności pisma, „text-decoration”, „text-transform”, „letter-spacing”, „word-spacing” (gdy jest to uzasadnione), „line-height”, „float”, „vertical-align” (tylko, jeśli własność „float” jest ustawiona na „none”), własności marginesów, własności dopełnienia, własności obramowania, własność koloru, własności tła. Aplikacje klienckie mogą stosować również inne własności. Aby móc poprawnie prezentować inicjały i „wysokie litery”, aplikacje klienckie mogą dobierać wysokość linii, szerokość i wysokość na podstawie kształtu litery (w przypadku normalnych elementów nie jest to możliwe).

Przykład:

Poniższy przykład CSS i HTML przedstawia możliwy sposób zaprezentowania inicjału. Należy zauważyć, że wysokość linii (line-height) oddziedziczona przez pseudoelement ::first-letter wynosi 1.1, ale aplikacja kliencka w tym przypadku inaczej obliczyła tę wartość, dzięki czemu nie ma niepotrzebnej przerwy między dwoma pierwszymi wierszami tekstu. Ponadto należy zwrócić uwagę, że fikcyjny znacznik otwierający pierwszej litery znajduje się wewnątrz elementu span, a mimo to nie jest ona pogrubiona jak pozostały tekst w elemencie span:

p { line-height: 1.1 }
p::first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.

Poniższy kod CSS sprawi, że pierwsza litera będzie miała wysokość równą w przybliżeniu wysokości dwóch pierwszych linii:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
  <TITLE>Pierwsza litera o wysokości dwóch linii</TITLE>
  <STYLE type="text/css">
   P               { font-size: 12pt; line-height: 1.2 }
   P::first-letter { font-size: 200%; font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first </SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

Dokument ten może zostać sformatowany następująco:

fikcyjna sekwencja znaczników to:

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN> 
few words of an article in The Economist.
</P>

Należy zauważyć, że znaczniki pseudoelementu ::first-letter otaczają treść (tzn. pierwszą literę), podczas gdy znacznik otwierający pseudoelementu ::first-line jest umieszczony bezpośrednio za znacznikiem otwierającym elementu blokowego.

W celu uzyskania tradycyjnego formatowania liter o wysokości na kilka wierszy, aplikacje klienckie mogą zaokrąglać rozmiary pisma, aby np. wyrównać linie bazowe pisma. Przy formatowaniu pod uwagę może zostać wzięty także obrys glifów.

7.3. Pusta część

Ten podrozdział został celowo pozostawiony pusty. (Wcześniej zawierał definicję pseudoelementu ::selection).

7.4. Pseudoelementy ::before i ::after

Za pomocą pseudoelementów ::before i ::after można wstawiać treść przed i za treścią określonych elementów. Ich objaśnienie znajduje się w specyfikacji CSS 2.1 [CSS21].

Jeśli na rzecz elementu zawierającego treść generowaną przez pseudoelementy ::before lub ::after zostaną zastosowane pseudoelementy ::first-letter i ::first-line, będą one odnosiły się do pierwszej litery lub pierwszego wiersza tego elementu wliczając tę generowaną treść.

8. Kombinatory

8.1.Kombinator wyboru potomka

Czasami autorzy mogą potrzebować selektora odnoszącego się do elementu będącego potomkiem innego elementu w drzewie dokumentu (np. „element EM znajdujący się w elemencie H1”). Do wyrażania tego typu relacji służy kombinator potomka. Kombinator potomka to biały znak rozdzielający dwie sekwencje selektorów prostych. Selektor potomka w postaci „A B” reprezentuje element B będący jednym z potomków dowolnego elementu A.

Przykłady:

Rozważmy na przykład budowę poniższego selektora:

h1 em

Reprezentuje on element em będący potomkiem elementu h1. Jest to poprawny i ważny, choć częściowy, opis poniższego fragmentu:

<h1>Ten <span class="myclass">nagłówek
jest <em>bardzo</em> ważny</span></h1>

Poniższy selektor:

div * p

reprezentuje element p będący wnukiem lub dalszym potomkiem elementu div. Należy zauważyć, że białe znaki po obu stronach znaku „*” nie są częścią selektora uniwersalnego. Są one kombinatorem wskazującym, że element div musi być przodkiem jakiegoś elementu i, że element ten musi być przodkiem jakiegoś elementu p.

Poniższy selektor, w którym zastosowano kombinację selektorów potomka i atrybutu, reprezentuje elementu, który (1) ma ustawiony atrybut href i (2) znajduje się w elemencie p znajdującym się w elemencie div:

div p *[href]

8.2. Kombinatory wyboru elementów dzieci

Kombinator elementu dziecka opisuje relację rodzic-dziecka między dwoma elementami. Kombinator elementu dziecka ma postać „znaku większości” (U+003E, >) rozdzielającego dwie sekwencje selektorów prostych.

Przykłady:

Poniższy selektor reprezentuje element p będący dzieckiem elementu body:

body > p

W poniższym przykładzie zastosowano połączenie kombinatorów potomka i dziecka.

div ol>li p

Ten selektor reprezentuje element p będący potomkiem elementu li; element li musi być dzieckiem elementu ol; element ol musi być potomkiem elementu div. Należy zwrócić uwagę, że nie zostały zastosowane dodatkowe białe znaki wokół kombinatora „>”.

Aby dowiedzieć się jak wybrać pierwszy element dziecko jakiegoś elementu, zobacz podrozdział o pseudoklasie :first-child.

8.3. Kombinatory wyboru elementów siostrzanych

Istnieją dwa kombinatory elementów siostrzanych: kombinator przylegającego elementu siostrzanego i ogólny kombinator elementu siostrzanego. W obu przypadkach węzły nie będące elementami (np. tekst między elementami) są ignorowane przy określaniu, czy dane dwa elementy są siostrzanymi elementami przylegającymi.

8.3.1.Kombinator wyboru przylegającego elementu siostrzanego

Kombinator przylegającego elementu siostrzanego ma postać „znaku plusa” (U+002B, +) rozdzielającego dwie sekwencje selektorów prostych. Elementy reprezentowane przez te dwie sekwencje mają tego samego rodzica w drzewie dokumentu i element reprezentowany przez pierwszą sekwencję jest bezpośrednim poprzednikiem elementu reprezentowanego przez drugą sekwencję.

Przykłady:

Poniższy selektor reprezentuje element p znajdujący się bezpośrednio za elementem math:

math + p

Poniższy selektor jest podobny pod względem konceptualnym do poprzedniego, ale zawiera selektor atrybutu — definiuje warunek, że element h1 musi mieć atrybut class="opener":

h1.opener + h2

8.3.2.Ogólny kombinator wyboru elementu siostrzanego

Ogólny kombinator elementu siostrzanego ma postać „znaku tyldy” (U+007E, ~) rozdzielającego dwie sekwencje selektorów prostych. Elementy reprezentowane przez te dwie sekwencje mają tego samego rodzica w drzewie dokumentu i element reprezentowany przez pierwszą sekwencję znajduje się przed (niekoniecznie bezpośrednio) elementem reprezentowanym przez drugą sekwencję.

Przykład:

h1 ~ pre

reprezentuje element pre znajdujący się za elementem h1. Jest to poprawny i ważny, choć częściowy, opis poniższego fragmentu:

<h1>Definicja funkcji a</h1>
<p>Funkcja a(x) musi zostać zastosowana do wszystkich liczb w tabeli.</p>
<pre>function a(x) = 12x/13.5</pre>

9. Obliczanie precyzji selektorów

Precyzja selektora jest obliczana w następujący sposób:

  • policz identyfikatory w selektorze (=a)
  • policz selektory klas, atrybutów i pseudoklas w selektorze (=b)
  • policz selektory typu i pseudoelementów w selektorze (=c)
  • zignoruj selektor uniwersalny

Selektory znajdujące się w pseudoklasie negacji liczą się tak samo, jak wszystkie inne, ale samej negacji nie liczy się jako pseudoklasy.

Połączenie tych trzech liczb a-b-c (w systemie liczbowym o dużej podstawie) stanowi precyzję selektora.

Przykłady:

*               /* a=0 b=0 c=0 -> precyzja =   0 */
LI              /* a=0 b=0 c=1 -> precyzja =   1 */
UL LI           /* a=0 b=0 c=2 -> precyzja =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> precyzja =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> precyzja =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> precyzja =  13 */
LI.red.level    /* a=0 b=2 c=1 -> precyzja =  21 */
#x34y           /* a=1 b=0 c=0 -> precyzja = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> precyzja = 101 */

Uwaga: powtórzenia tego samego selektora prostego są dozwolone i zwiększają precyzję.

Uwaga: precyzja stylów zdefiniowanych w atrybucie style języka HTML jest opisana w specyfikacji CSS 2.1. [CSS21].

10. Gramatyka selektorów

10.1. Gramatyka

Poniższa gramatyka definiuje składnię Selektorów. Jest ona globalnie typu LL(1) i może być lokalnie typu LL(2) (należy jednak zauważyć, że większość aplikacji klienckich nie powinno wykorzystywać jej bezpośrednio, ponieważ nie zawiera ona konwencji dotyczących analizy składniowej). Format produkcji został zoptymalizowany pod kątem użyteczności dla człowieka oraz zostały użyte pewne skróty notacyjne spoza programu Yacc (zobacz [YACC]):

  • *: 0 lub więcej
  • +: 1 lub więcej
  • ?: 0 lub 1
  • |: oddziela alternatywy
  • [ ]: grupowanie

Produkcje:

selectors_group
  : selector [ COMMA S* selector ]*
  ;

selector
  : simple_selector_sequence [ combinator simple_selector_sequence ]*
  ;

combinator
  /* kombinatory mogą być otoczone białymi znakami */
  : PLUS S* | GREATER S* | TILDE S* | S+
  ;

simple_selector_sequence
  : [ type_selector | universal ]
    [ HASH | class | attrib | pseudo | negation ]*
  | [ HASH | class | attrib | pseudo | negation ]+
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudo
  /* '::' oznaczają początek pseudoelementu, znak „:” oznacza pseudoklasę */
  /* Wyjątki: :first-line, :first-letter, :before oraz :after. */
  /* Należy zauważyć, że w selektorze może znajdować się maksymalnie jeden pseudoelement i */
  /* może on znajdować się wyłącznie na końcu sekwencji selektorów prostych (simple_selector_sequence). */
  : ':' ':'? [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* expression ')'
  ;

expression
  /* W CSS3 wyrażeniami są identyfikatory, łańcuchy znaków, */
  /* lub zapisy w formie „an+b” */
  : [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
  ;

negation
  : NOT S* negation_arg S* ')'
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudo
  ;

10.2. Skaner leksykalny

Poniżej znajduje się tokenizer napisany w notacji Flex (zobacz [FLEX]). Tokenizer ten rozróżnia małe i wielkie litery.

Dwa wystąpienia wartości „377” reprezentują najwyższy numer znaku aktualnie obsługiwany przez Flex (255 w systemie dziesiętnym). Należy je czytać jako „4177777” (1114111 w systemie dziesiętnym). Jest to najwyższa możliwa jednostka kodowa w standardzie Unicode/ISO-10646. [UNICODE]

%option case-insensitive

ident     [-]?{nmstart}{nmchar}*
name      {nmchar}+
nmstart   [_a-z]|{nonascii}|{escape}
nonascii  [^�-177]
unicode   [0-9a-f]{1,6}(rn|[ nrtf])?
escape    {unicode}|[^nrf0-9a-f]
nmchar    [_a-z0-9-]|{nonascii}|{escape}
num       [0-9]+|[0-9]*.[0-9]+
string    {string1}|{string2}
string1   "([^nrf"]|{nl}|{nonascii}|{escape})*"
string2   '([^nrf']|{nl}|{nonascii}|{escape})*'
invalid   {invalid1}|{invalid2}
invalid1  "([^nrf"]|{nl}|{nonascii}|{escape})*
invalid2  '([^nrf']|{nl}|{nonascii}|{escape})*
nl        n|rn|r|f
w         [ trnf]*

D         d|�{0,4}(44|64)(rn|[ trnf])?
E         e|�{0,4}(45|65)(rn|[ trnf])?
N         n|�{0,4}(4e|6e)(rn|[ trnf])?|n
O         o|�{0,4}(4f|6f)(rn|[ trnf])?|o
T         t|�{0,4}(54|74)(rn|[ trnf])?|t
V         v|�{0,4}(58|78)(rn|[ trnf])?|v

%%

[ trnf]+     return S;

"~="             return INCLUDES;
"|="             return DASHMATCH;
"^="             return PREFIXMATCH;
"$="             return SUFFIXMATCH;
"*="             return SUBSTRINGMATCH;
{ident}          return IDENT;
{string}         return STRING;
{ident}"("       return FUNCTION;
{num}            return NUMBER;
"#"{name}        return HASH;
{w}"+"           return PLUS;
{w}">"           return GREATER;
{w}","           return COMMA;
{w}"~"           return TILDE;
":"{N}{O}{T}"("  return NOT;
@{ident}         return ATKEYWORD;
{invalid}        return INVALID;
{num}%           return PERCENTAGE;
{num}{ident}     return DIMENSION;
"<!--"           return CDO;
"-->"            return CDC;

/*[^*]**+([^/*][^*]**+)*/                    /* ignore comments */

.                return *yytext;

11. Profile

Każda specyfikacja wykorzystująca selektory musi definiować podzbiór selektorów, które dopuszcza i których używania zabrania oraz opisywać lokalne znaczenie wszystkich składników tego podzbioru.

Przykłady nienormatywne:

Profil selektorów
SpecyfikacjaCSS poziom 1
Akceptujeselektory typu
selektory klasy
selektory identyfikatora
pseudoklasy :link, :visited oraz :active
kombinator potomka
pseudoelementy ::first-line i ::first-letter
Nie akceptuje

selektora uniwersalnego
selektorów atrybutu
pseudoklas :hover i :focus
pseudoklasy :target
pseudoklasy :lang()
żadnej z pseudoklas stanów elementów interfejsu użytkownika
żadnych pseudoklas strukturalnych
pseudoklasy negacji
pseudoelementów ::before i ::after
kombinatorów elementu dziecka
kombinatorów elementów siostrzanych

przestrzenie nazw

Dodatkowe ograniczeniatylko jeden selektor klasy jest dozwolony w jednej sekwencji selektorów prostych


Profil selektorów
SpecyfikacjaCSS poziom 2
Akceptujeselektory typu
selektor uniwersalny
selektory obecności i wartości atrybutów
selektory klas
selektory identyfikatora
pseudoklasy :link, :visited, :active, :hover, :focus, :lang() oraz :first-child
kombinator potomka
kombinator elementu dziecka
kombinator przylegającego elementu siostrzanego
pseudoelementy ::first-line i ::first-letter
pseudoelementy ::before i ::after
Nie akceptuje

selektorów atrybutów dopasowujących części łańcuchów
pseudoklas :target
żadnych pseudoklas stanu elementów interfejsu użytkownika
żadnych pseudoklas strukturalnych oprócz :first-child
pseudoklasy negacji
ogólnych kombinatorów elementu siostrzanego

przestrzenie nazw

Dodatkowe ograniczeniawięcej niż jeden selektor klasy jest dozwolony w jednej sekwencji selektorów prostych (ograniczenie CSS 1)

W języku CSS selektory wyrażają zasady dopasowywania wzorców decydujące o tym, które reguły stylistyczne mają zastosowanie do określonych elementów w drzewie dokumentu.

Poniższy selektor (CSS 2) będzie pasował do wszystkich kotwic a mających ustawiony atrybut name i znajdujących się w nagłówku pierwszego poziomu h1:

h1 a[name]

Wszystkie deklaracje CSS powiązane z selektorem są stosowane do elementów, które do niego pasują.

Profil selektorów
SpecyfikacjaSTTS 3
Akceptuje

selektory typu
selektory uniwersalne
selektory atrybutów
selektory klasy
selektory identyfikatora
wszystkie pseudoklasy strukturalne
wszystkie kombinatory

przestrzenie nazw

Nie akceptujenieakceptowanych pseudoklas
pseudoelementów
Dodatkowe ograniczenianiektóre selektory i kombinatory są niedozwolone w opisach fragmentów po prawej stronie deklaracji STTS.

W STTS 3 selektorów można używać na dwa różne sposoby:

  1. jako mechanizmu równoważnego mechanizmowi selekcji CSS: deklaracje związane z danym selektorem są stosowane do elementów pasujących do tego selektora,
  2. jako opisu fragmentów, które znajdują się po prawej stronie deklaracji.

12. Zgodność i wymagania

Niniejszy podrozdział zawiera opis warunków zgodności jedynie z niniejszą specyfikacją.

Brak implementacji w aplikacji klienckiej części tej specyfikacji z powodu ograniczeń określonego urządzenia (np. nieinteraktywne aplikacje klienckie nie mogą implementować dynamicznych pseudoklas, ponieważ pseudoklasy te bez interaktywności są bezużyteczne) nie powoduje braku zgodności ze specyfikacją.

Każda specyfikacja wykorzystująca Selektory musi zawierać Profil zawierający podzbiór akceptowanych i nieakceptowanych Selektorów i opisujący ograniczenia dodawane do aktualnej specyfikacji.

Niepoprawność jest powodowana przez błąd parsowania, np. nierozpoznany token albo token, który nie może znajdować się w danym miejscu.

Aplikacje klienckie muszą przestrzegać zasad obsługi błędów parsowania:

  • selektor prosty zawierający przedrostek niezdefiniowanej przestrzeni nazw jest niepoprawny
  • selektor zawierający niepoprawny selektor prosty, niepoprawny kombinator lub niepoprawny token jest niepoprawny.
  • grupa selektorów zawierająca niepoprawny selektor jest niepoprawna.

Specyfikacje wykorzystujące Selektory muszą definiować sposób obsługi błędów parsowania. (W przypadku CSS następuje anulowanie całej reguły, w której został użyty niepoprawny selektor).

13. Testy

Niniejsza specyfikacja jest zaopatrzona w zestaw testów pozwalający sprawdzić czy aplikacja kliencka jest zgodna w podstawowym zakresie z tą specyfikacją. Zestaw ten nie jest wyczerpujący i nie testuje wszystkich możliwych kombinacji Selektorów.

14. Podziękowania

Grupa robocza CSS dziękuje wszystkim tym, którzy podzielili się z nią swoimi uwagami w ciągu lat jej pracy.

W szczególności specjalne podziękowania kierowane są do następujących osób: Donna McManus, Justin Baker, Joel Sklar oraz Molly Ives Brower. Osoby te dokonały ostatecznej korekty ostatniego szkicu. Ponadto grupa robocza dziękuje następującym osobom i podmiotom: Adam Kuehn, Boris Zbarsky, David Perrell, Elliotte Harold, Matthew Raymond, Ruud Steltenpool, Patrick Garies, Anton Prowse oraz grupa robocza ds. internacjonalizacji W3C za ostatnie uwagi i miłe słowa.

15. Źródła

15.1.Źródła normatywne

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 07 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607/
[CSS3NAMESPACE]
Elika J. Etemad; Anne van Kesteren. CSS Namespaces Module. 29 September 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-css3-namespace-20110929/
[FLEX]
Flex: The Lexical Scanner Generator. Version 2.3.7, ISBN 1882114213
[UNICODE]
The Unicode Consortium. The Unicode Standard, Version 6.0.0, (Mountain View, CA: The Unicode Consortium, 2011. ISBN 978-1-936213-01-6) and as updated from time to time by the publication of new versions. (See http://www.unicode.org/unicode/standard/versions/ for the latest version and additional information on versions of the standard and of the Unicode Character Database).
Available at http://www.unicode.org/versions/Unicode6.0.0/
[YACC]
S. C. Johnson. YACC – Yet another compiler compiler. Murray Hill. 1975. Technical Report.

15.2. Źródła informacyjne

[BCP47]
A. Phillips; M. DavisTags for Identifying Languages and Matching of Language Tags. September 2009. Internet Best Current Practice 47. URL: http://www.rfc-editor.org/rfc/bcp/bcp47.txt
[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411
[DOM-LEVEL-3-CORE]
Gavin Nicol; et al. Document Object Model (DOM) Level 3 Core Specification. 7 April 2004. W3C Recommendation. URL: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407
[HTML401]
David Raggett; Ian Jacobs; Arnaud Le Hors. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[MATHML]
Patrick Ion; Robert Miner. Mathematical Markup Language (MathML) 1.01 Specification. 7 July 1999. W3C Recommendation. URL: http://www.w3.org/1999/07/REC-MathML-19990707
[STTS3]
Daniel Glazman. Simple Tree Transformation Sheets 3. Electricité de France. 11 November 1998. Submission to the W3C. URL: http://www.w3.org/TR/NOTE-STTS3
[SVG11]
Erik Dahlström et. al. Scalable Vector Graphics (SVG) 1.1 Specification. 16 August 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-SVG11-20110816/
[UAX29]
Mark Davis. Text Boundaries. 25 March 2005. Unicode Standard Annex #29. URL: http://www.unicode.org/unicode/reports/tr29/tr29-9.html
[XML-NAMES]
Tim Bray; et al. Namespaces in XML 1.0 (Third Edition). 6 August 2009. W3C Proposed Edited Recommendation. URL: http://www.w3.org/TR/2009/PER-xml-names-20090806
[XML10]
C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 10 February 1998. W3C Proposed Edited Recommendation. Revised 5 February 2008 URL: http://www.w3.org/TR/2008/PER-xml-20080205