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