5 Selettori

Sommario

5.1 Corrispondenze a modelli

Nei CSS, le regole di corrispondenze a modelli determinano quali regole di stile si applicano agli elementi nell'albero del documento. Questi modelli, chiamati selettori, possono spaziare da nomi di semplici elementi fino a ricchi modelli contestuali. Se tutte le condizioni nel modello sono vere per un certo elemento, il selettore seleziona [matches] l'elemento.

La sensibilità alle maiuscole ed alle minuscole [case-sensitivity] dei nomi degli elementi del linguaggio del documento, nei selettori dipende dal linguaggio del documento. Per esempio, in HTML, i nomi degli elementi non sono sensibili alle maiscuole ed alle minuscole, ma in XML lo sono.

La seguente tabella riassume la sintassi dei selettori CSS2:

ModelliSignificatoDescritto nella sezione
*Seleziona ogni elemento.Selettore universale
ESeleziona ogni elemento E (cioè un elemento di tipo E).Selettori di tipo
E FSeleziona ogni elemento F che sia un discendente di un elemento E.Selettori di discendenti
E > FSeleziona ogni elemento F che sia un figlio di un elemento E.Selettori di figli
E:first-childSeleziona l'elemento E quando E è il primo figlio del suo genitore. La pseudo-classe :first-child
E:link
E:visited
Seleziona l'elemento E se E è l'ancora di un ipercollegamento la cui destinazione non è stata ancora visitata (:link) o è già stata visitata (:visited). Le pseudo-classi per i collegamenti
E:active
E:hover
E:focus
Seleziona E durante determinate azioni dell'utente. Le pseudo-classi dinamiche
E:lang(c) Seleziona l'elemento di tipo E se è nel linguaggio (umano) c (la lingua del documento specifica come la lingua è determinata). La pseudo-classe :lang()
E + FSeleziona ogni elemento F immediatamente preceduto da un elemento E.Selettori di adiacenti
E[foo]Seleziona ogni elemento E con l'attributo "foo" impostato (qualunque sia il valore). Selettori di attributo
E[foo="warning"]Seleziona ogni elemento E il cui attributo "foo" sia esattamente uguale a "warning". Selettori di attributo
E[foo~="warning"]Seleziona ogni elemento E il cui valore di attributo "foo" è un elenco di valori separati da spazio, uno dei quali è esattamente uguale a "warning". Selettori di attributo
E[lang|="en"]Seleziona ogni elemento
E il cui attributo "lang" ha un elenco di valori separati da un trattino che comincia (da sinistra) con "en".
Selettori di attributo
DIV.warningsolo HTML. Lo stesso che DIV[class~="warning"]. Selettori di classe
E#myidSeleziona ogni elemento E il cui ID è uguale a "myid".Selettori di ID

5.2 Sintassi dei selettori

Un selettore semplice è un selettore di tipo o selettore universale immediatamente seguito da zero o più selettori di attributo, selettori di ID, o pseudo-classi, in ogni ordine. Il selettore semplice seleziona se ciascuno dei suoi componenti seleziona [match].

Un selettore è una concatenazione [chain] di uno o più selettori semplici separati da combinatori. I combinatori sono: spazio bianco, ">", e "+". Lo spazio bianco può apparire fra un combinatore e i selettori semplici attorno ad esso.

Gli elementi dell'albero del documento che un selettore seleziona sono chiamati soggetti del selettore. Un selettore che consiste di un semplice selettore singolo seleziona ogni elemento che soddisfa i suoi requisiti. Inserire un selettore semplice ed un combinatore in una concatenazione impone restrizioni di selezione aggiuntive, cosicchè i soggetti di un selettore sono sempre un sottoinsieme di elementi che vengono selezionati dal selettore semplice posto più a destra.

Uno pseudo-elemento può essere agganciato all'ultimo selettore semplice in una concatenazione, nel qual caso l'informazione di stile si applica ad una sottoparte di ciascun soggetto.

5.2.1 Raggruppamento

Quando diversi selettori condividono le stesse dichiarazioni, possono essere raggruppati in un elenco separato da virgola.

Esempi(o):

In questo esempio, raggruppiamo tre regole con dichiarazioni identiche in una. Così,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

è equivalente a:

H1, H2, H3 { font-family: sans-serif }

I CSS offrono altri meccanismi di "abbreviazione" [shorthand], inclusi dichiarazioni multiple e proprietà di abbreviazione.

5.3 Il selettore universale

Il selettore universale, scritto "*", seleziona il nome di ogni tipo di elemento. Seleziona ogni singolo elemento nell' albero del documento.

Se il selettore universale non è il solo componente di un selettore semplice, il "*" può essere omesso. Per esempio:

5.4 Selettori di tipo

Un selettore di tipo seleziona il nome di un tipo di elemento del linguaggio del documento. Un selettore di tipo seleziona ogni istanza di un tipo di elemento nell'albero del documento.

Esempi(o):

La seguente regola seleziona tutti gli elementi H1 nell'albero del documento:

H1 { font-family: sans-serif }

5.5 Selettori di discendenti

A volte gli autori possono volere selezionare un elemento che sia il discendente di un altro elemento nell'albero del documento (per esempio, "Seleziona quegli elementi EM che sono contenuti da un elemento H1"). I selettori di discendenti esprimono tale relazione in un modello [pattern]. Un selettore di discendente è costituito da due o più selettori separati da uno spazio bianco. Un selettore di discendente della forma "A B" seleziona quando un elemento B è un arbitrario discendente di un elemento antenato A.

Esempi(o):

Per esempio, si considerino le seguenti regole:

H1 { color: red }
EM { color: red }

Sebbene l'intenzione di queste regole sia quella di aggiungere enfasi al testo cambiando il suo colore, l'effetto andrà perso in un caso come:

<H1>This headline is <EM>very</EM> important</H1>

Indirizziamo questo caso aggiungendo alle precedenti regole una regola che imposti il colore del testo sul blu ogni volta che un EM ricorre all'interno di un H1:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

La terza regola selezionerà EM nel seguente frammento:

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

Esempi(o):

Il seguente selettore:

DIV * P 

seleziona un elemento P che è il nipote o il discendente successivo di un elemento DIV. Si noti lo spazio bianco su entrambi i lati di "*".

Esempi(o):

Il selettore nella seguente regola, che combina i selettori di discendenti e di attributo, seleziona ogni elemento che (1) ha l'attributo "href" impostato e (2) è dentro un P che a sua volta è dentro un DIV:

DIV P *[href]

5.6 Selettori di figli

Un selettore di figlio seleziona quando un elemento è il figlio di qualche elemento. Un selettore di figlio è costituito di due o più selettori separati da ">".

Esempi(o):

La seguente regola imposta lo stile di tutti gli elementi P che sono figli di BODY:

BODY > P { line-height: 1.3 }

Esempi(o):

Il seguente esempio combina i selettori di discendenti e i selettori di figli:

DIV OL>LI P

Seleziona un elemento P che è un discedente di un elemento LI; l'elemento LI deve essere il figlio di un elemento OL; l'elemento OL deve essere un discendente di un DIV. Si noti che lo spazio bianco opzionale intorno al combinatore ">" è stato tralasciato.

Per informazioni sulla selezione del primo figlio di un elemento, si prega di vedere la sezione sulla pseudo-classe:first-child di seguito.

5.7 Selettori di fratelli adiacenti

I selettori di fratelli adiacenti hanno la seguente sintassi: E1 + E2, dove E2 è il soggetto del selettore. Il selettore seleziona se E1 e E2 condividono lo stesso genitore nell'albero del documento e E1 precede immediatamente E2.

In taluni contesti, gli elementi adiacenti generano oggetti di formattazione la cui presentazione è gestita automaticamente (per esempio, margini verticali che collassano fra riquadrati [box] adiacenti). Il selettore "+" consente agli autori di specificare uno stile addizionale per elementi adiacenti.

Esempi(o):

Così, la seguente regola afferma che quando un elemento P segue immediatamente un elemento MATH, non dovrebbe essere indentato:

MATH + P { text-indent: 0 } 

Il prossimo esempio riduce lo spazio verticale che separa un H1 e un H2 che lo segue immediatamente:

H1 + H2 { margin-top: -5mm }   

Esempi(o):

La seguente regola è simile a quella nel precedente esempio, tranne per il fatto che aggiunge un selettore di attributo. Così, la formattazione speciale ricorre solo quando H1 ha class="opener":

H1.opener + H2 { margin-top: -5mm }   

5.8 Selettori di attributo

I CSS2 consentono agli autori di specificare regole che selezionino attributi definiti nel documento sorgente.

5.8.1 Corrispondenze ad attributi e valori di attributo

I selettori di attributo possono selezionare in quattro modi:

[att]
Seleziona quando l'elemento imposta l'attributo "att", qualunque sia il valore dell'attributo.
[att=val]
Seleziona quando il valore dell'attributo "att" dell'elemento è esattamente "val".
[att~=val]
Seleziona quando il valore dell'attributo "att" dell'elemento è un elenco di "parole" separate da spazio, una delle quali è esattamente "val". Se viene usato questo selettore, le parole nel valore non devono contenere spazi (poichè sono separate da spazi).
[att|=val]
Seleziona quando il valore dell'attributo "att" dell'elemento è un elenco di parole, che comincia con "val", separate da un trattino. La selezione comincia sempre all'inizio del valore dell'attributo. Ciò è stato concepito soprattutto per consentire selezioni di sottocodice linguistico (per esempio, l'attributo "lang" in HTML) come descritto in RFC 1766 ([RFC1766]).

I valori di attributo devono essere identificatori [identifiers] o stringhe. La sensibilità alle maiuscole e alle minuscole [case-sensitivity] dei nomi di attributo dipende dal linguaggio del documento.

Esempi(o):

Per esempio, il seguente selettore di attributo seleziona tutti gli elementi H1 che specifichino l'attributo "title", qualunque sia il suo valore:

H1[title] { color: blue; }

Esempi(o):

Nel seguente esempio, il selettore seleziona tutti gli elementi SPAN il cui attributo "class" abbia esattamente il valore "example":

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

Selettori di attributo multipli possono essere usati per far riferimento a diversi attributi di un elemento, o anche diverse volte allo stesso attributo.

Esempi(o):

Qui il selettore seleziona tutti gli elementi SPAN il cui attributo "hello" abbia esattamente il valore "Cleveland" e il cui attributo "goodbye" abbia esattamente il valore "Columbus":

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

Esempi(o):

I seguenti selettori illustrano le differenze fra "=" e "~=". Il primo selettore selezionerà, per esempio, il valore "copyright copyleft copyeditor" per l'attributo "rel". Il secondo selettore selezionerà solo quando l'attributo "href" ha il valore "http://www.w3.org/".

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

Esempi(o):

La seguente regola nasconde tutti gli elementi per i quali il valore dell'attributo "lang" è "fr" (ossia, la lingua è il francese).

*[LANG=fr] { display : none }

Esempi(o):

La seguente regola selezionerà i valori dell'attributo "lang" che iniziano con "en", inclusi "en", "en-US", e "en-cockney":

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

Esempi(o):

Similmente, le seguenti regole di un foglio di stile acustico permettono ad uno script di essere letto a voce alta con voci differenti per ogni ruolo:

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

5.8.2 Valori di attributo predefiniti nelle DTD

La selezione ha luogo sui valori di attributo nell'albero del documento. Per linguaggi di documento diversi dall'HTML, i valori degli attributi predefiniti possono essere definiti in una DTD o altrove. I fogli di stile dovrebbero essere sviluppati [designed] in modo tale da funzionare anche se i valori predefiniti non sono inclusi nell'albero del documento.

Esempi(o):

Per esempio, si consideri un elemento EXAMPLE con un attributo "notation" che ha il valore predefinito di "decimal". Il frammento DTD potrebbe essere

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

Se il foglio di stile contiene le regole

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal] { /*... other settings...*/ }

allora per includere i casi in cui questo attributo è impostato come predefinito, e non esplicitamente, si può aggiungere la seguente regola:

EXAMPLE { /*... default property settings ...*/ }

Poichè questo selettore è meno specifico di un selettore di attributo, sarà usato solo per il caso predefinito. Bisogna prestare attenzione che tutti gli altri valori di attributo ,che non ottengono il medesimo stile come quello predefinito, siano esplicitamente coperti.

5.8.3 Selettori di classe

Per i fogli di stile usati con l'HTML, gli autori possono usare la notazione col punto (.) come alternativa alla notazione con "~=" quando si seleziona sull'attributo "class". Così, per l'HTML, "DIV.value" e "DIV[class~=value]" hanno il medesimo significato. Il valore di attributo deve immediatamente seguire il ".".

Esempio(o):

Per esempio, possiamo assegnare informazioni di stile a tutti gli elementi con class~="pastoral" come segue:

*.pastoral { color: green }  /* all elements with class~=pastoral */
o semplicemente
.pastoral { color: green }  /* all elements with class~=pastoral */

Il seguente esempio assegna lo stile solo agli elementi H1 con class~="pastoral":

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

Date queste regole, la prima istanza di H1 di seguito non avrà il testo verde, mentre la seconda lo avrà:

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

Per selezionare un sottoinsieme di valori "class", ogni valore deve essere preceduto da un ".", in ogni ordine.

Esempi(o):

Per esempio, la seguente regola seleziona ogni elemento P al cui attributo "class" è stato assegnato un elenco di valori separati da spazio che include "pastoral" e "marine":

 
P.pastoral.marine { color: green }

Questa regola seleziona quando class="pastoral blue aqua marine" ma non seleziona per class="pastoral blue".

Nota. I CSS danno così tanto potere all'attributo "class", che gli autori potrebbero strutturare un proprio "linguaggio del documento" basato su elementi con quasi nessuna presentazione associata (come DIV e SPAN nell'HTML) e assegnargli informazioni di stile attraverso l'attributo "class". Gli autori dovrebbero evitare questa pratica, poichè gli elementi strutturali del linguaggio del documento hanno spesso significati riconosciuti ed accettati, cosa che le classi definite dagli autori possono non avere.

5.9 Selettori di ID

I linguaggi del documento possono contenere attributi che vengono dichiarati di tipo ID. Ciò che rende gli attributi di tipo ID speciali è che non vi possono essere due di tali attributi con lo stesso valore; qualunque sia il linguaggio del documento, un attributo ID può essere usato per identificare univocamente il suo elemento. In HTML tutti gli attributi ID sono denominati "id"; le applicazioni XML possono denominare gli attributi ID in modo differente, ma si applicano le medesime restrizioni.

L'attributo ID di un linguaggio del documento permette agli autori di assegnare un identificatore all'istanza di un elemento nell'albero del documento. I selettori di ID CSS selezionano un'istanza di elemento basandosi sul suo identificatore. Un selettore di ID CSS contiene un "#" immediatamente seguito dal valore di ID.

Esempi(o):

Il seguente selettore di ID seleziona l'elemento H1 il cui attributo di ID ha il valore "chapter1":

H1#chapter1 { text-align: center }

Nel seguente esempio, la regola di stile seleziona l'elemento che ha il valore di ID "z98y". La regola selezionerà: così l'elemento P:

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

Nel prossimo esempio, tuttavia, la regola di stile selezionerà solo un elemento H1 che ha un valore di ID di "z98y". La regola non selezionerà l'elemento P in questo esempio:

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

I selettori di ID hanno una precedenza più alta dei selettori di attributo. Per esempio, in HTML, il selettore #p123 è più specifico di [ID=p123] intermini di collegamento a cascata [cascade].

Nota. In XML 1.0 [XML10], l'informazione su quale attributo contiene l'ID di un elemento è contenuto in una DTD. Quando analizzano [parsing] l'XML, i programmi utente [user-agent] non sempre leggono la DTD, e così possono non sapere qual'è l'ID di un elemento. Se uno sviluppatore di fogli di stile sa o sospetta che questo sarà il suo caso, dovrebbe usare invece normali selettori di attributo: [name=p371] invece di #p371. Tuttavia, l'ordine di cascata dei normali selettori di attributo è diversa dai selettori di ID. Può essere necessario aggiungere una priorità "!important" alle dichiarazioni: [name=p371] {color: red ! important}. Ovviamente, gli elementi nei documenti XML 1.0 senza una DTD non hanno affatto ID.

5.10 Pseudo-elementi e pseudo-classi

Nei CSS2, lo stile è normalmente aggiunto ad un elemento basandosi sulla sua posizione nell'albero del documento. Questo semplice modello è sufficiente per molti casi, ma alcuni comuni scenari di pubblicazione possono non essere possibili a causa della struttura dell'albero del documento. Per esempio, in HTML 4.0 (si veda [HTML40]), nessun elemento fa riferimento alla prima riga di un paragrafo, e perciò nessun semplice selettore CSS può farvi riferimento.

I CSS introducono i concetti di pseudo-elementi e pseudo-classi per permettere la formattazione basata su informazioni che si trovano al di fuori dell'albero del documento.

Nè gli pseudo-elementi nè le pseudo-classi appaiono nel sorgente del documento o nell'albero del documento.

Le pseudo-classi sono ammesse ovunque fra i selettori, mentre gli pseudo-elementi possono apparire solo dopo il soggetto del selettore.

I nomi degli pseudo-elementi e delle pseudo-classi non sono sensibili alle maiuscole e alle minuscole [case-insensitive].

Alcune pseudo-classi sono mutuamente [reciprocamente. si confronti il Dizionario Italiano di Tullio De Mauro] esclusive, mentre altre possono essere applicate simultaneamente allo stesso elemento. In caso di regole in conflitto, il normale ordine di cascata determina il vincitore.

I programmi utente [user-agent] HTML conformi possono ignorare tutte le regole con :first-line o :first-letter nel selettore, o, in alternativa, supportare solo un sottoinsieme delle proprietà su questi pseudo-elementi.

5.11 Pseudo-classi

5.11.1 La pseudo-classe :first-child

La pseudo-classe :first-child seleziona un elemento che è il primo figlio di un altro elemento.

Esempi(o):

Nell'esempio seguente, il selettore seleziona ogni elemento P che è il primo figlio di un elemento DIV. La regola sopprime l'indentazione per il primo paragrafo di un DIV:

DIV > P:first-child { text-indent: 0 }
Questo selettore selezionerà il P dentro il DIV del seguente frammento:
<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>
ma non selezionerà il secondo P nel seguente frammento:
<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

Esempi(o):

La seguente regola imposta il peso del font [carattere] a 'bold' per ogni elemento EM che è un discendente di un elemento P che è un primo figlio:

P:first-child EM { font-weight : bold }

Si noti che poichè riquadrati [box] anonimi non sono parte dell'albero del documento, non vengono calcolati quando si calcola il primo figlio.

Per esempio, l'EM in:

<P>abc <EM>default</EM> 
è il primo figlio del P.

I seguenti due selettori sono equivalenti:

* > A:first-child   /* A is first child of any element */
A:first-child       /* Same */

5.11.2 Le pseudo-classi per i collegamenti: :link e :visited

I programmi utente [user-agent] di solito visualizzano i collegamenti [link] non visitati in modo diverso da quelli visitati in precedenza. I CSS forniscono le pseudo-classi ':link' e ':visited' per distinguerli:

Nota. Dopo un certo periodo di tempo, i programmi utente [user-agent] possono scegliere di far tornare un collegamento visitato allo stato ':link' (non visitato).

I due stati sono mutuamente esclusivi.

Il linguaggio del documento determina quali elementi sono ancore (ipercollegamenti) nel sorgente. Per esempio, in HTML 4.0, le pseudo-classi per i collegamenti si applicano agli elementi A con un attributo "href". Così, le due seguenti dichiarazioni CSS2 hanno un effetto simile:

A:link { color: red }
:link  { color: red }

Esempi(o):

Se il seguente collegamento:

<A class="external" href="http://out.side/">external link</A>
è stato visitato, questa regola:
A.external:visited { color: blue }
lo farà essere blu.

5.11.3 Le pseudo-classi dinamiche: :hover, :active, e :focus

I programmi utente [user-agent] interattivi a volte cambiano la resa [rendering] in risposta alle azioni dell'utente. I CSS forniscono tre pseudo-classi per i casi comuni:

Queste pseudo-classi non sono mutuamente esclusive. Un elemento può selezionarne diverse nello stesso tempo.

I CSS non definiscono quali elementi possono trovarsi negli stati sopracitati, o come gli stati vengano introdotti e abbandonati. Gli script possono cambiare il fatto che gli elementi reagiscano agli eventi-utente oppure no, e dispositivi e programmi utente [user-agent] differenti possono avere differenti modalità di puntare o di attivare gli elementi.

Non si richiede ai programmi utente [user-agent] di risistemare la resa [to reflow, lett. 'rifluire'. Per la contestualizzazione del termine si veda la traduzione italiana di On Having Layout] di un documento correntemente visualizzato a causa delle transizioni delle pseudo-classi. Per esempio, un foglio di stile può specificare che il 'font-size' di un collegamento :active dovrebbe essere più grande di quello di un collegamento inattivo, ma poichè questo può causare un cambiamento di posizione delle lettere quando il lettore seleziona il collegamento, un programma utente [user-agent] può ignorare la corrispondente regola di stile.

Esempi(o):

A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */

Si noti che A:hover deve essere posizionato dopo le regole A:link e A:visited, poichè altrimenti le regole di cascata nasconderanno la proprietà 'color' della regola A:hover. Similmente, poichè A:active è posizionato dopo A:hover, il colore attivo (lime) verrà applicato quando l'utente attiva e passa col mouse sopra l'elemento A.

Esempi(o):

Un esempio di pseudo-classi dinamiche combinate:

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

L'ultimo selettore seleziona gli elementi A che sono nella pseudo-classe :focus e nella pseudo-classe :hover.

Per informazioni sulla presentazione dei contorni focus, si prega di consultare la sezione sui contorni dinamici focus.

Nota. Nei CSS1, la pseudo-classe ':active' era mutualmente esclusiva con ':link' and ':visited'. Questo non è più il caso. Un elemento può essere sia ':visited' che ':active' (o ':link' e ':active') e le normali regole di cascata determineranno quali proprietà si applicheranno.

5.11.4 La pseudo-classe per la lingua: :lang

Se il linguaggio del documento specifica come è determinato il linguaggio umano di un elemento, è possibile scrivere selettori nei CSS che selezionino un elemento basandosi sulla sua lingua. Per esempio, in HTML [HTML40], la lingua è determinata dalla combinazione dell'attributo "lang", dell'elemento META, e possibilmente da informazioni derivate dal protocollo (come le intestazioni [headers] HTTP). XML usa un attributo chiamato XML:LANG, e possono esservi altri metodi, specifici ai linguaggi del documento, per determinare la lingua.

La pseudo-classe ':lang(C)' seleziona se l'elemento è nella lingua C. Qui C è un codice di lingua come specificato nell'HTML 4.0 [HTML40] e in RFC 1766 [RFC1766]. Viene selezionato nello stesso modo dell'operatore '|='.

Esempi(o):

Le seguenti regole impostano le virgolette per un documento HTML che sia in francese o in tedesco:

HTML:lang(fr) { quotes: ' ' ' ' }
HTML:lang(de) { quotes: '' '' '\2039' '\203A' }
:lang(fr) > Q { quotes: ' ' ' ' }
:lang(de) > Q { quotes: '' '' '\2039' '\203A' }

La seconda coppia di regole imposta la proprietà 'quotes' sugli elementi Q secondo la lingua del loro genitore. Ciò viene fatto perchè la scelta delle virgolette si basa tipicamente sulla lingua dell'elemento intorno alla citazione, non alla citazione stessa: come questo frammento di francese “à l'improviste” nel mezzo di un testo inglese usa virgolette inglesi.

5.12 Pseudo-elementi

5.12.1 Lo pseudo-elemento :first-line

Lo pseudo-elemento :first-line applica stili speciali alla prima riga formattata di un paragrafo. Ad esempio:

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

La regola di sopra vuol dire: "cambia le lettere della prima riga di ogni paragrafo in maiuscolo". Tuttavia, il selettore "P:first-line" non seleziona ogni reale elemento HTML. Seleziona uno pseudo-elemento che programmi utente conformi[conforming user agents] inseriranno all'inizio di ogni paragrafo.

Si noti che la lunghezza della prima riga dipende da un numero di fattori, fra cui la larghezza della pagina, la dimensione del font [carattere], ecc. Così, un ordinario paragrafo HTML come:

<P>This is a somewhat long HTML 
paragraph that will be broken into several 
lines. The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>
le cui righe saranno interrotte come segue:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag 
sequence. The other lines will be treated as 
ordinary lines in the paragraph.
potrebbe essere "riscritto" dai programmi utente [user-agent] per includere la sequenza di tag fittizi per :first-line. Questa sequenza di tag fittizi aiuta a mostrare come le proprietà vengono ereditate.
<P><P:first-line> This is a somewhat long HTML 
paragraph that will </P:first-line> be broken into several
lines. The first line will be identified 
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>

Se uno pseudo-elemento spezza un elemento reale, l'effetto desiderato può spesso essere descritto da una sequenza di tag fittizi che chiuda e poi riapra l'elemento. Così, se marchiamo il precedente paragrafo con un elemento SPAN:

<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines 
will be treated as ordinary lines in the 
paragraph.</P>
il programma utente potrebbe generare gli appropriati tag di apertura e di chiusura per SPAN quando si inserisce la sequenza di tag fittizia per :first-line.
<P><P:first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P:first-line><SPAN class="test"> be
broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the 
paragraph.</P>

Lo pseudo-elemento :first-line può essere aggiunto solo a elementi a livello di blocco.

Lo pseudo-elemento :first-line è simile ad un elemento a livello di riga, ma con alcune restrizioni. Solo le seguenti proprietà si applicano ad uno pseudo-elemento :first-line: proprietà dei font [caratteri], proprietà del colore, proprietà dello sfondo, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', e 'clear'.

5.12.2 Lo pseudo-elemento :first-letter

Lo pseudo-elemento :first-letter può essere usato per i "caratteri iniziali" e "capilettera iniziali", che sono comuni effetti tipografici. Questo tipo di carattere è simile ad un elemento a livello di riga se la sua proprietà 'float' è 'none', altrimenti è simile ad un elemento flottato [floated].

Queste sono le proprietà che si applicano agli pseudo-elementi :first-letter: proprietà del font [carattere], proprietà del colore, proprietà dello sfondo, 'text-decoration', 'vertical-align' (solo se 'float' è 'none'), 'text-transform', 'line-height', proprietà dei margini, proprietà del cuscinetto [padding], proprietà dei bordi, 'float', 'text-shadow', e 'clear'.

Il seguente CSS2 creerà un capolettera iniziale di due righe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    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>

Questo esempio potrebbe essere formattato come segue:

Immagine che illustra l'effetto combinato degli pseudo-elementi :first-line e :first-letter   [D]

La sequenza di tag fittizia è:

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

Si noti che i tag dello pseudo-elemento :first-letter sono a ridosso del contenuto (ossia il carattere iniziale),mentre il tag di apertura dello pseudo-elemento :first-line è inserito proprio dopo il tag di apertura dell'elemento a cui è legato.

Per ottenere la tradizionale formattazione dei capilettera, i programmi utente [user-agent] possono approssimare la dimensione dei font [caratteri], per esempio per allineare le righe della base. Anche il simbolo di contorno [outline] può essere calcolato nella formattazione.

La punteggiatura (ossia i caratteri definiti in Unicode [UNICODE] nelle classi di punteggiatura "open" [aperto] (Ps), "close" [chiuso] (Pe), e "other" [altro] (Po)), che precede la prima lettera dovrebbe essere inclusa, come in:

Le virgolette che precedono
la prima lettera dovrebbero essere.   [D]

Lo pseudo-elemento :first-letter seleziona solo parti di elementi a livello di blocco.

Alcune lingue possono avere regole specifiche su come trattare determinate combinazioni di lettere. In olandese, per esempio, se la combinazione di lettere "ij" appare all'inizio di parola, entrambe le lettere dovrebbero essere considerate all'interno dello pseudo-elemento :first-letter.

Esempi(o):

Il seguente esempio illustra come pseudo-elementi che si sovrappongono possono interagire. La prima lettera di ogni elemento P sarà verde con una grandezza di carattere di'24pt'. Il resto della prima riga formattata sarà 'blue' mentre il resto del paragrafo sarà 'red'.

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

<P>Some text that ends up on two lines</P>

Presupponendo che un'interruzione di riga occorrerà prima della parola "ends", la sequenza di tag fittizi per questo frammento potrebbe essere:

<P>
<P:first-line>
<P:first-letter> 
S 
</P:first-letter>ome text that 
</P:first-line> 
ends up on two lines 
</P>

Si noti che l'elemento :first-letter è all'interno dell'elemento :first-line. Le proprietà impostate su :first-line sono ereditate da :first-letter, ma sono sovrascritte se la medesima proprietà è impostata su :first-letter.

5.12.3 Gli pseudo-elementi :before e :after

Gli pseudo-elementi ':before' e ':after' possono essere usati per inserire contenuto generato prima [before] o dopo [after] il contenuto di un elemento. Sono spiegati nella sezione sul testo generato.

Esempi(o):

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

Quando gli pseudo-elementi :first-letter e :first-line sono combinati con :before and :after, si applicano alla prima lettera o riga dell'elemento che include il testo inserito.

Esempi(o):

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

Questo renderà [render] la "S" di "Special!" in oro.