BeautifulCode

Start Publikacje Tłumaczenia Książki Słownik programistyczny

5 Selektory

5.1 Dopasowywanie wzorców

W języku CSS zasady dopasowywania wzorców decydują o tym, które reguły stylistyczne mają zastosowanie do określonych elementów w drzewie dokumentu. Wzorce te, nazywane selektorami, mogą mieć postać od prostych nazw elementów po skomplikowane kontekstowe konstrukcje. Jeśli wszystkie warunki wzorca zostaną spełnione w odniesieniu do określonego elementu, selektor pasuje do tego elementu.

To, czy wielkość liter w nazwach elementów języka dokumentu użytych w selektorach ma znaczenie, 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.

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

5.2 Składnia selektorów

Selektor prosty to selektor typu lub selektor uniwersalny, po którym znajduje się zero lub więcej selektorów atrybutu, selektorów identyfikatora lub pseudoklas w dowolnej kolejności. Selektor prosty tworzy dopasowanie, gdy wszystkie jego składniki są pasujące.

Uwaga: terminologia zastosowana w specyfikacji CSS 2.1 różni się od terminologii CSS 3. Na przykład w CSS 3 "selektor prosty" obejmuje mniejszą część selektora niż w CSS 2.1. Zobacz moduł selektorów CSS 3 [CSS3SEL].

Selektor to sekwencja składająca się z jednego selektora lub większej ich liczby oddzielonych kombinatorami. Kombinatory to: białe znaki, ">" oraz "+". Białe znaki mogą występować między kombinatorami a znajdującymi się wokół nich selektorami prostymi.

Elementy drzewa dokumentu pasujące do selektora nazywane są przedmiotem selektora. Selektor składający się z jednego prostego selektora pasuje do każdego elementu spełniającego jego warunki. Znajdujące się przed łańcuchem selektory i kombinatory stanowią dodatkowe warunki ograniczające dopasowywanie, dzięki czemu przedmioty selektora zawsze są podzbiorem elementów pasujących do ostatniego selektora prostego.

Jeden pseudoelement można dołączyć do ostatniego selektora prostego w łańcuchu. Wówczas informacje stylistyczne odnoszą się do jakiejś podczęści każdego przedmiotu.

5.2.1 Grupowanie

Jeśli kilka selektorów ma takie same deklaracje, można je zgrupować w postaci listy oddzielanej przecinkami.

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

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

W CSS dostępne są także inne techniki „skracania”, takie jak pisanie wielu deklaracji i własności zbiorcze.

5.3 Selektor uniwersalny

Selektor uniwersalny, mający postać "*", pasuje do nazwy każdego elementu. Pasuje do każdego elementu w drzewie dokumentu.

Jeśli selektor uniwersalny nie jest jedynym składnikiem selektora prostego, znak "*" można opuścić. Na przykład:

• Zapisy *[lang=fr] i [lang=fr] są równoważne.
• Zapisy *.warning i .warning są równoważne.
• Zapisy *#myid i #myid są równoważne.

5.4 Selektory typu

Selektor typu pasuje do nazwy typu elementu w danym języku użytym do utworzenia dokumentu. Selektor typu dopasowuje każde wystąpienie takiego typu elementu w drzewie dokumentu.

h1 { font-family: sans-serif }

5.5 Selektory potomka

Czasami potrzebny jest selektor dopasowujący element będący potomkiem innego elementu w drzewie dokumentu (np. „pasujący do elementów EM znajdujących się w elemencie H1”). Tego rodzaju zależności we wzorcu wyrażają selektory potomka. Selektor potomka składa się z przynajmniej dwóch selektorów oddzielonych białymi znakami. Selektor potomka w postaci "A B" pasuje do elementu B, jeśli którymś z przodków tego elementu jest element A.

h1 { color: red }
em { color: red }

<H1>Ten nagłówek jest <EM>bardzo</EM> ważny</H1>

h1 { color: red }
em { color: red }
h1 em { color: blue }

<H1>Ten <SPAN class="myclass">nagłówek 
jest <EM>bardzo</EM> ważny</SPAN></H1>

div * p 

div p *[href]

5.6 Selektory potomka

Selektor potomka pasuje do elementów będących dzieckiem jakiegoś elementu. Selektor potomka składa się z przynajmniej dwóch selektorów oddzielonych znakiem ">".

body > P { line-height: 1.3 }

div ol>li p

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

5.7 Selektory brata

Selektor brata ma następującą składnię: E1 + E2, gdzie E2 jest przedmiotem selektora. Dopasowanie selektora następuje wówczas, gdy E1 i E2 mają tego samego rodzica w drzewie dokumentu oraz E1 znajduje się bezpośrednio przed E2 (węzły nie będące elementami, jak węzły tekstowe i komentarze, nie są brane pod uwagę).

math + p { text-indent: 0 } 

h1 + h2 { margin-top: -5mm }   

h1.opener + h2 { margin-top: -5mm }   

5.8 Selektory atrybutu

CSS 2.1 pozwala na dopasowywanie elementów z dokumentu źródłowego, które mają określone atrybuty.

5.8.1 Dopasowywanie atrybutów i wartości atrybutów

Są cztery sposoby dopasowywania selektorów atrybutów:

[att]

Dopasowanie następuje, jeśli element ma ustawiony atrybut "att" na jakąkolwiek wartość.

[att=val]

Dopasowanie następuje, gdy atrybut "att" elementu ma wartość "val".

[att~=val]

Reprezentuje element mający atrybut att, którego wartością jest lista słów oddzielanych spacjami, z których jedno to "val". Jeśli "val" zawiera białe znaki, nie może niczego reprezentować (ponieważ słowa są oddzielane spacjami). Jeśli "val" jest pustym łańcuchem, również nic nie reprezentuje.

[att|=val]

Reprezentuje element mający atrybut att, którego wartość to dokładnie "val" lub "val" ze znakiem "-" (U+002D) bezpośrednio za tą wartością. Głównym celem tego selektora jest umożliwienie dopasowywania podkodu języka (np. atrybutu hreflang elementu a w języku HTML) zgodnie z dokumentem RFC 3066 ([RFC3066]) lub jego następnikiem. Aby uzyskać informacje na temat dopasowywania podkodu języka lang (lub xml:lang), zobacz Pseudoklasa :lang.

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

h1[title] { color: blue; }

span[class=example] { color: blue; }

Aby odwołać się do kilku atrybutów elementu, a nawet kilka razy to tego samego atrybutu, można zastosować kilka selektorów atrybutu.

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

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

*[lang=fr] { display : none }

*[lang|="en"] { color : red }

DIALOGUE[character=romeo] 
     { voice-family: "Laurence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Domyślne wartości atrybutów w dokumentach DTD

Dopasowywanie jest wykonywane na wartościach atrybutów w drzewie dokumentu. W dokumentach DTD lub w innych miejscach mogą być zdefiniowane domyślne wartości atrybutów, ale nie zawsze można je dopasować za pomocą selektorów atrybutu. Arkusze stylów powinny być tak zaprojektowane, aby działały nawet wówczas, gdy w drzewie dokumentu nie ma wartości domyślnych.

Mówiąc precyzyjniej, aplikacja kliencka 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ę w [XML10].)

Aplikacja kliencka rozpoznająca jakąś przestrzeń nazw XML [XMLNAMESPACES] 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.)

Należy zauważyć, że zwykle implementacje ignorują podzbiory zewnętrzne.

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

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

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

5.8.3 Selektory klasy

Autorzy używający języka HTML mogą zastąpić notację ~= kropką (.) służącą 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ą dopasowywać selektory za pomocą 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 takiej wiedzy na temat przestrzeni nazw jest treść specyfikacji określonej przestrzeni nazw (np. SVG 1.1 [SVG11] opisuje atrybut "class" SVG oraz wymagany sposób jego interpretacji; podobnie w MathML 2.0 [MATH20] znajduje się opis atrybutu "class" MathML.)

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

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

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

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

Aby nastąpiło dopasowanie podzbioru wartości atrybutu "class", każda z tych wartości musi być poprzedzona znakiem ".".

 
p.marine.pastoral { color: green }

5.9 Selektory identyfikatora

Języki dokumentu mogą zawierać atrybuty zadeklarowane jako identyfikatory. Ich cechą wyróżniającą jest to, że tylko jeden atrybut tego typu może mieć określoną wartość. Bez względu na język dokumentu, atrybut typu identyfikatorowego służy do jednoznacznego identyfikowania jakiegoś elementu. W języku HTML wszystkie atrybuty typu identyfikatorowego nazywają się "id". W aplikacjach XML mogą być używane inne nazwy, ale ograniczenia pozostają te same.

Atrybut identyfikatora w języku dokumentu pozwala na przypisanie identyfikatora jednemu egzemplarzowi określonego elementu w drzewie dokumentu. Selektory identyfikatora CSS są dopasowywane do egzemplarzy elementów na podstawie ich identyfikatorów. Selektor identyfikatora CSS składa się ze znaku "#", bezpośrednio po którym znajduje się wartość, która musi być identyfikatorem.

Należy zauważyć, że specyfikacja CSS nie określa w jaki sposób aplikacja kliencka rozpoznaje identyfikator elementu. Aplikacja może np. odczytać DTD dokumentu, mieć takie informacje zakodowane lub spytać użytkownika.

h1#chapter1 { text-align: center }

<HEAD>
  <TITLE>Dopasowanie P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Szeroki tekst</P>
</BODY>

<HEAD>
  <TITLE>Dopasowanie tylko elementu H1</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Szeroki tekst</P>
</BODY>

Selektory identyfikatora mają wyższy stopień precyzji niż selektory atrybutu. Na przykład w języku HTML selektor #p123 jest bardziej precyzyjny od selektora [id=p123] według zasad kaskadowości.

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ć używając mieszanin wiedzy dotyczącej xml:id [XMLID], DOM3 Core [DOM-LEVEL-3-CORE], DTD XML [XML10] oraz przestrzeni nazw.

5.10 Pseudoelementy i pseudoklasy

W CSS 2.1 typowo style są przypisywane elementom na podstawie ich miejsca w drzewie dokumentu. Ten prosty model dobrze funkcjonuje w wielu przypadkach. Jednak niektórych efektów nie sposób uzyskać posługując się wyłącznie strukturą drzewa dokumentu. Na przykład w języku HTML 4 (zobacz [HTML4]) nie ma elementu odnoszącego się do pierwszego wiersza akapitu, przez co żaden selektor prosty CSS również nie może się do niego odwoływać.

W CSS wprowadzono pojęcia pseudoelementów i pseudoklas, które umożliwiają zastosowanie formatowania na podstawie informacji spoza drzewa dokumentu.

• 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 w celu sformatowania do treści, która nie istnieje w dokumencie źródłowym (np. pseudoelementy :before i :after udostępniają treść generowaną).
• Pseudoklasy klasyfikują elementy według kryteriów innych niż ich nazwa, atrybut lub treść. Zasadniczo są to takie cechy, których nie można wydedukować z drzewa dokumentu. Pseudoklasy mogą być dynamiczne w takim sensie, że element może nabywać lub tracić pseudoklasę w wyniku działań użytkownika. Wyjątkami są pseudoklasy ':first-child', którą można wydedukować z drzewa dokumentu i ':lang()', którą również można wydedukować z drzewa dokumentu w niektórych przypadkach.

Ani pseudoelementy, ani pseudoklasy nie są obecne w źródle dokumentu, ani drzewie dokumentu.

Pseudoklasy mogą znajdować się w dowolnym miejscu selektora, natomiast pseudoelementy mogą być dołączane tylko do ostatniego selektora prostego w selektorze.

W nazwach pseudoelementów i pseudoklas nie jest rozpoznawana wielkość liter.

Niektóre pseudoklasy wykluczają się wzajemnie, podczas gdy inne można stosować jednocześnie wobec tego samego elementu. W przypadku konfliktu reguł, o wyniku decydują zasady kolejności w kaskadzie.

5.11 Pseudoklasy

5.11.1 Pseudoklasa :first-child

Pseudoklasa :first-child dopasowuje element będący pierwszym dzieckiem innego elementu.

div > p:first-child { text-indent: 0 }

<P> Ostatni element P przed uwagą.
<DIV class="note">
   <P> Pierwszy element P w uwadze.
</DIV>

<P> Ostatni element P przed uwagą.
<DIV class="note">
   <H2>Uwaga</H2>
   <P> Pierwszy element P w uwadze.
</DIV>

p:first-child em { font-weight : bold }

Należy zauważyć, że pola anonimowe nie należą do drzewa dokumentu, a więc nie liczą się przy określaniu pierwszego dziecka.

<P>abc <EM>domyślny</EM> 

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

* > a:first-child   /* A jest pierwszym dzieckiem dowolnego elementu */
a:first-child       /* To samo */

5.11.2 Pseudoklasy łączy: :link i :visited

Zwykle aplikacje klienckie inaczej wyświetlają łącza nieodwiedzone i łącza odwiedzone. Do rozróżnienia ich w CSS służą pseudoklasy ':link' i ':visited':

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

Aplikacje klienckie mogą w pewnym momencie przywrócić odwiedzone łącze do stanu ':link' (nieodwiedzone).

Te dwa stany wzajemnie się wykluczają.

To, które elementy są kotwicami źródłowymi hiperłączy zależy od języka dokumentu. Na przykład w języku HTML 4 pseudoklasa :link dotyczy elementów A z atrybutem "href". Zatem obie poniższe deklaracje CSS 2.1 wywołują podobny efekt:

a:link { color: red }
:link  { color: red }

<A class="external" href="http://out.side/">Łącze zewnętrzne</A>

a.external:visited { color: blue }

Uwaga: istnieje ryzyko, że autorzy arkuszy stylów wykorzystają pseudoklasy :link i :visited, aby dowiedzieć się, które strony użytkownik odwiedził bez jego zgody.

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. Aby uzyskać więcej informacji o zachowaniu prywatności, zobacz [P3P].

5.11.3 Pseudoklasy dynamiczne: :hover, :active i :focus

Interaktywne aplikacje klienckie czasami zmieniają sposób prezentacji w odpowiedzi na działania użytkownika. W CSS dostępne są trzy pseudoklasy dotyczące najczęstszych przypadków:

• Pseudoklasa :hover jest stosowana, gdy użytkownik wskaże jakiś element (za pomocą jakiegoś urządzenia wskazującego), ale go nie aktywuje. Na przykład wizualna aplikacja kliencka może zastosować tę pseudoklasę, gdy kursor (wskaźnik myszy) znajdzie się nad polem wygenerowanym przez taki element. Aplikacje klienckie nie obsługujące mediów interaktywnych nie muszą obsługiwać tej pseudoklasy. Niektóre zgodne przeglądarki obsługujące media interaktywne mogą nie być w stanie obsłużyć tej pseudoklasy (np. pisak).
• Pseudoklasa :active jest stosowana, gdy element zostanie aktywowany. Dotyczy to np. czasu między naciśnięciem przycisku myszy i zwolnieniem go.
• Pseudoklasa :focus jest stosowana, gdy element ma fokus (przyjmuje zdarzenia klawiatury lub inne rodzaje danych tekstowych).

Element może pasować do kilku pseudoklas jednocześnie.

Specyfikacja CSS nie określa które elementy mogą znajdować się w wymienionych stanach ani sposobów wchodzenia w takie stany i wychodzenia z nich. Za pomocą skryptów można sprawić, że elementy będą reagować na zdarzenia lub nie. Ponadto różne urządzenia i aplikacje klienckie mogą stosować techniki wskazywania i aktywowania elementów.

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

Aplikacje klienckie nie muszą zmieniać układu wyświetlonego dokumentu w związku ze zmianami powodowanymi przez pseudoklasy. Na przykład arkusz stylów może zawierać regułę powiększającą wartość własności 'font-size' aktywnego (:active) łącza w stosunku do łącza nieaktywnego. Ponieważ to może spowodować zmianę położenia liter, aplikacja kliencka ma prawo zignorować odpowiadającą za to regułę stylistyczną.

a:link    { color: red }    /* Nieodwiedzone łącza */
a:visited { color: blue }   /* Łącza odwiedzone   */
a:hover   { color: yellow } /* Wskazywanie elementu     */
a:active  { color: lime }   /* Łącza aktywne    */

a:focus { background: yellow }
a:focus:hover { background: white }

Aby uzyskać informacje na temat prezentowania obrysów podczas fokusu, zobacz podrozdział o dynamicznych obrysach w fokusie.

5.11.4 Pseudoklasa języka: :lang

Jeśli język dokumentu definiuje sposób określania języka ludzkiego elementu, można utworzyć selektory CSS pasujące do elementów według ich języka. Na przykład w języku HTML [HTML4] język określany jest za pomocą kombinacji atrybutu "lang", elementu META oraz ewentualnych informacji pochodzących od protokołu (np. nagłówków HTTP). W języku XML istnieje atrybut o nazwie xml:lang, ale dopuszcza się istnienie w językach dokumentu także innych metod określania języka.

Pseudoklasa ':lang(C)' zostaje dopasowana, gdy językiem elementu jest C. Dopasowanie zależy wyłącznie od tego czy identyfikator C jest równy wartości elementu języka lub znajduje się w łańcuchu wartości oddzielanych myślnikami — podobnie działa operator '|='. 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 nie może być pusty.

Uwaga: zaleca się, aby w dokumentach i protokołach język był określany za pomocą kodów z dokumentu RFC 3066 [RFC3066] 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".

html:lang(fr-ca) { quotes: '� ' ' �' }
html:lang(de) { quotes: '�' '�' '\2039' '\203A' }
:lang(fr) > Q { quotes: '� ' ' �' }
:lang(de) > Q { quotes: '�' '�' '\2039' '\203A' }

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

5.12 Pseudoelementy

5.12.1 Pseudoelement :first-line

Pseudoelement :first-line stosuje specjalne formatowanie do zawartości pierwszego formatowanego wiersza akapitu. Na przykład:

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

Powyższą regułę należy czytać: "zmień litery w pierwszym wierszu każdego akapitu na wielkie". Jednakże selektor "P:first-line" nie pasuje do żadnego prawdziwego elementu języka HTML. Pasuje do pseudoelementu, który zgodne aplikacje klienckie wstawią na początku każdego akapitu.

Należy zauważyć, że długość pierwszego wiersza zależy od kilku czynników, takich jak np. szerokość strony, rozmiar czcionki itp. Zatem poniższy zwykły akapit 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 zwykle linie tekstu 
w akapicie.</P>

którego wiersze zostały 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ć" dodając do niego fikcyjne znaczniki oznaczające pierwszy wiersz (: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 zwykle linie tekstu 
w akapicie.</P>

Jeśli pseudoelement dzieli na części rzeczywisty element, żądany efekt często można opisać przez fikcyjne znaczniki, które zamykają i ponownie otwierają ten element. Dodamy do powyższego akapitu element SPAN:

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

Aplikacja kliencka wstawiająca fikcyjne znaczniki pseudoelementu :first-line może zasymulować początek i koniec 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 zwykle linie tekstu 
w akapicie.</P>

Pseudoelement :first-line można stosować wyłącznie wobec elementów blokowych, typu inline-block, table-caption oraz table-cell.

"Pierwszy sformatowany wiersz" elementu może wystąpić w blokowym potomku w tym samym układzie (tzn. blokowym potomku, który nie jest elementem pozycjonowanym ani pływającym). 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> itakdalej</DIV> pierwszym formatowanym wierszem elementu DIV nie jest "Witam".

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ć.) Oto przykład. Fikcyjne znaczniki 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: własności pisma, własności 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.

5.12.2 Pseudoelement :first-letter

Pseudoelement :first-letter musi wybierać pierwszą literę w pierwszym wierszu bloku, jeśli nie ma przed nią w tym samym wierszu żadnej innej treści (np. obrazów lub tabeli śródliniowych). Za pomocą pseudoelementu :first-letter można uzyskać efekty "inicjały" i "rozciąganie wysokości pierwszej litery na kilka wierszy tekstu", które bardzo często spotykane są w typografii. Tego rodzaju pierwsza litera jest podobna do elementu śródliniowego, jeśli jej własność 'float' jest ustawiona na 'none'. W pozostałych przypadkach jest podobna do elementów pływających.

Do pseudoelementów :first-letter mają zastosowanie następujące własności: własności czcionki, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (gdy dotyczy), 'line-height', 'float', 'vertical-align' (tylko, jeśli własność 'float' ma wartość 'none'), własności marginesów, własności dopełnienia, własności obramowania, własności kolorów, 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). W CSS 3 spodziewane są specjalne własności mające zastosowanie do pierwszej litery.

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.

<!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-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>Kilka pierwszych </SPAN> słów artykułu
    w tygodniku The Economist.</P>
 </BODY>
</HTML>

<P>
<SPAN>
<P:first-letter>
K
</P:first-letter>ilka pierwszych
</SPAN> 
słów artykułu w tygodniku The Economist.
</P>

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.

Znaki przestankowe (tzn. znaki zdefiniowane w Unicode [UNICODE] w klasach "open" (Ps), "close" (Pe), "initial" (Pi), "final" (Pf) oraz "other" (Po)), znajdujące się przed lub za pierwszą literą powinny być wstawiane w następujący sposób:

Pseudoelement ':first-letter' ma także zastosowanie, gdy pierwsza litera jest w rzeczywistości cyfrą, np. "6" w zdaniu "67 milionów dolarów to dużo pieniędzy".

Pseudoelement :first-letter ma zastosowanie do elementów blokowych oraz typu list-item, table-cell, table-caption i inline-block.

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.

<div>
<p>Pierwszy tekst.

<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 element ten nie ma pierwszej litery.

Pierwsza litera musi znajdować się w pierwszym formatowanym wierszu. Na przykład we fragmencie <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 w języku HTML 4). W szczególności nie dopasuje litery "P" w wyrazie "Pierwsza".

Jeśli element jest elementem listy ('display: list-item'), pseudoelement ':first-letter' ma zastosowanie do pierwszej litery w polu pierwotnym za punktorem. Aplikacje klienckie mogą zignorować pseudoelement ':first-letter' w elementach listy, jeśli ich własność 'list-style-position' jest ustawiona na 'inside'. Jeśli element ma treść ':before' lub ':after', pseudoelement ':first-letter' ma zastosowanie do pierwszej litery tego elementu uwzględniając tę treść.

Np. po zastosowaniu reguły 'p:before {content: "Uwaga: "}', selektor 'p:first-letter' pasuje do litery "U" ze słowa "Uwaga".

W niektórych językach mogą istnieć szczegółowe zasady dotyczące traktowania określonych kombinacji liter. 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.

Jeśli litery składające się na pierwszą literę nie znajdują się w tym samym elemencie, jak "'T" w <p>'<em>T..., aplikacja kliencka może utworzyć pseudoelement pierwszej litery z jednego z tych elementów, 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.

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>

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

5.12.3 Pseudoelementy :before i :after

Za pomocą pseudoelementów ':before' i ':after' można wstawiać treść generowaną przed i za treścią elementów. Ich szczegółowy opis znajduje się w podrozdziale o generowaniu tekstu.

h1:before {content: counter(chapno, upper-roman) ". "}

Jeśli na rzecz elementu zawierającego treść generowaną przez pseudoelementy :before i :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ść.

p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}