Selettori

Sommario

I selettori sono pattern che selezionano elementi in un albero. I selettori sono stati ottimizzati per l'uso con HTML e XML, e sono concepiti per essere usabili in un codice di performance critica.

I CSS (Fogli di stile a cascata) sono un linguaggio usato per descrivere la resa dei documenti HTML e XML su schermo, su carta, nei dispositivi vocali, ecc. CSS usano i selettori per unire le proprietà di stile agli elementi nel documento. Questo documento descrive le estensioni ai selettori definite nei CSS di livello 2. Questi selettori estesi saranno usati dai CSS di livello 3.

I selettori definiscono la seguente funzione:

espressione * elemento → booleano

Il che significa, dato un elemento e un selettore, che questa specifica definisce se l'elemento ha una corrispondenza col selettore.

Queste espressioni possono anche essere usate, ad esempio, per selezionare un insieme di elementi, valutando l'espressione su tutti gli elementi in un sotto-albero. STTS (Simple Tree Transformation Sheets), un linguaggio per trasformare alberi XML, usa questo meccanismo. [STTS]

Stato di questo documento

Questa sezione descrive lo stato di questo documento al momento della sua pubblicazione. Altri documenti possono rimpiazzare questo documento. Un elenco delle attuali pubblicazioni W3C e l'ultima revisione di questo resoconto tecnico si trovano nell'indice dei resoconti tecnici W3C presso http://www.w3.org/TR/.

Questo documento descrive selettori che già esistono nei CSS1 e CSS2, e propone nuovi selettori per i CSS3 e per altri linguaggi che possono averne bisogno.

Il Gruppo di Lavoro sui CSS non si aspetta che tutte le implementazioni dei CSS3 dovranno implementare tutti i selettori. Invece, ci saranno probabilmente un ristretto numero di varianti dei CSS3, chiamati profili. Per esempio, solo un profilo per programmi utente interattivi potrà includere tutti i selettori.

Questa bozza di specifica è l'ultima chiamata per il Gruppo di Lavoro sui CSS (Style Activity). Questo documento è una revisione della Raccomandazione Candidata del 13 novembre 2001, e ha incorporato il feedback nell'implementazione ricevuto negli ultimi anni. Ci si aspetta che questo documento proceda verso la fase di Raccomandazione Proposta, poichè si ritiene che l'interoperabilità sarà dimostrabile. .

Tutti sono incoraggiati ad analizzare e ad implementare questa specifica e a mandare i loro commenti alla mailing list pubblica (archiviata) www-style (si vedano le istruzioni). I Membri W3C possono a loro volta inviare i commenti al Gruppo di Lavoro sui CSS. Il tempo limite per i commenti è il 14 gennaio 2006.

Questo è ancora un documento di bozza e può essere aggiornato, sostituito o reso obsoleto da altri documenti in ogni momento. Non è appropriato citare una Bozza di Lavoro W3C se non come "lavoro in svolgimento".

Questo documento può essere disponibile in traduzione. La versione inglese di questa specifica è l'unica versione normativa.

1. Introduzione

1.1. Dipendenze

Alcune caratteristiche di questa specifica sono peculiari ai CSS, o hanno particolari limiti o regole specifiche ai CSS. In questa specifica, tali caratteristiche sono state descritte secondo i termini dei CSS2.1. [CSS21]

1.2. Terminologia

Tutto il contenuto di questa specifica è normativo, eccezion fatta per gli esempi, le note e le sezioni esplicitamente contrassegnate come non-normative. .

1.3. Cambiamenti dai CSS2

Questa sezione non è normativa.

Le principali differenze tra i selettori CSS2 e quelli di questa specifica sono:

• l'elenco di definizioni di base (selettore, gruppo di selettori, selettore semplice, ecc.) è stato cambiato; nello specifico, quello che nei CSS2 veniva definito selettore semplice è ora chiamato sequenza di selettori semplici, e il termine "selettore semplice" è ora usato per i componenti di questa sequenza
• un componente namespace facoltativo è ora consentito nei selettori di tipo di elemento, nel selettore universale e nei selettori di attributo
• un nuovo combinatore è stato introdotto
• sono stati aggiunti nuovi selettori semplici, che comprendono selettori di attributo con corrispondenza a sottostringhe e nuove pseudo-classi
• nuovi pseudo-elementi, e l'introduzione della convenzione "::" per gli pseudo-elementi
• la grammatica è stata riscritta
• profili da aggiungere alle specifiche che integrano i Selettori e definiscono l'insieme di selettori effettivamente supportati da ciascuna specifica
• I Selettori sono ora un Modulo CSS3 e una specifica indipendente; altre specifiche possono ora far riferimento a questo documento indipendentemente dai CSS
• la specifica ha ora una sua suite di test

2. Selettori

Queste sezione non è normativa, in quanto riassume soltanto le sezioni successive.

Un Selettore rappresenta una struttura. Questa struttura può essere usata come condizione (per esempio in una regola CSS) che determina quali elementi vengono selezionati daun selettore nell'albero del documento, o come una semplice descrizione del frammento HTML o XML che corrisponde a tale struttura.

I Selettori possono spaziare dai semplici nomi di elemento fino a ricche rappresentazioni contestuali.

La seguente tabella riassume la sintassi dei Selettori:

Il significato di ogni selettore deriva dalla corrispondenza, nella tabella di cui sopra, tra l'espressione "seleziona" e i contenuti di ciascuna cella nella colonna "Significato".

3. Sensibilità alle maiuscole e alle minuscole

La sensibilità alle maiuscole e alle minuscole dei nomi di elemento, dei nomi di attributo, e dei valori dei selettori nel linguaggio del documento dipende appunto da tale linguaggio. Per esempio, in HTML i nomi di elemento non sono sensibili alle maiuscole e alle minuscole, mentre in XML lo sono.

4. Sintassi dei selettori

Un selettore è una catena di una o più sequenze di selettori semplici separate da combinatori.

Una sequenza di selettori semplici è una catena di selettori semplici che non sono separati da un combinatore. Inizia sempre con un selettore di tipo o un selettore universale. Nessun altro selettore di tipo o selettore universale è ammesso nella sequenza.

Un selettore semplice è sia un selettore di tipo, selettore universale, selettore di attributo, selettore di classe, selettore di ID, selettore di contenuto, o pseudo-classe. Uno pseudo-elemento può essere aggiunto all'ultima sequenza di selettori semplici.

I combinatori sono: spazio bianco, "segno di maggiore di" (U+003E, >), "segno più" (U+002B, +) e "tilde" (U+007E, ~). Lo spazio bianco può trovarsi tra un combinatore e i selettori semplici attorno ad esso. Solo i caratteri "spazio" (U+0020), "tab" (U+0009), "avanzamento di riga" (U+000A), "ritorno di carrello" (U+000D), e "avanzamento di pagina" (U+000C) possono ricorrere nello spazio bianco. Altri caratteri simili allo spazio, come lo "spazio-em" (U+2003) e lo "spazio ideografico" (U+3000), non fanno mai parte dello spazio bianco.

Gli elementi dell'albero del documento rappresentati da un selettore si dicono soggetti del selettore. Un elemento consistente di una singola sequenza di selettori semplici rappresenta tutti gli elementi che soddisfano i suoi requisiti. Correlare una sequenza di selettori semplici e un combinatore ad un'altra sequenza impone restrizioni di selezione aggiuntive, in modo che i soggetti di un selettore siano sempre un sottoinsieme degli elementi rappresentati dall'ultima sequenza di selettori semplici.

Un selettore vuoto, che non contiene alcuna sequenza di selettori semplici e nessuno pseudo-elemento, è un selettore non valido .

5. Gruppi di selettori

Quando più selettori condividono le stesse dichiarazioni, possono essere raggruppati in un elenco avente una virgola come separatore. (Una virgola è U+002C.)

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

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

Attenzione: in questo esempio l'equivalenza è vera perchè tutti i selettori sono selettori validi. Se solo uno di essi fosse non valido, l'intero gruppo di selettori non sarebbe valido. Questo invaliderebbe la regole per tutti e tre gli elementi di intestazione, laddove nel primo caso solo una delle tre regole individuali verrebbe invalidata.

6. Selettori semplici

6.1. Selettori di tipo

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

h1

6.1.1. Selettori di tipo e namespace

I selettori di tipo consentono l'uso di un componente facoltativo di namespace ([XMLNAMES]). Un prefisso di namespace precedentemente dichiarato può essere preposto al nome dell'elemento separandolo tramite il separatore di namespace, ossia la "barra verticale" (U+007C, |).

Il componente di namespace può essere lasciato vuoto per indicare che il selettore rappresenta solo elementi privi di un namespace dichiarato.

Si può usare un asterisco per il prefisso di namespace, ad indicare che il selettore rappresenta gli elementi in ogni namespace (inclusi gli elementi senza namespace).

I selettori di tipo che non hanno un componente di namespace (nessun separatore di namespace), rappresentano gli elementi senza tener conto del namespace dell'elemento (equivale a "*|") a meno che non sia stato dichiarato un namespace predefinito. Se è stato dichiarato un namespace predefinito, il selettore rappresenterà solo gli elementi nel namespace predefinito.

Un selettore di tipo contenente un prefisso di namespace non precedentemente dichiarato è un selettore non valido. Il meccanismo per la dichiarazione del prefisso di namespace viene lasciato al linguaggio che implementa i selettori. Nei CSS un tale meccanismo viene definito nel modulo di Sintassi Generale.

In un client che riconosce i namespace, i selettori di tipo di elemento selezioneranno solo rispetto alla parte locale del nome qualificato dell'elemento. Si vedano di seguito le note sui comportamenti di selezione nei client di basso livello.

Riassumendo:

ns|E

elementi con nome E nel namespace ns

*|E

elementi con nome E in ogni namespace, inclusi quelli privi di un namespace dichiarato

|E

elementi con nome E senza alcun namespace dichiarato

E

se non viene specificato un namespace predefinito, l'espressione è equivalente a *|E. Altrimenti è equivalente a ns|E dove ns è il namespace predefinito.

@namespace foo url(http://www.example.com);
 foo|h1 { color: blue }
 foo|* { color: yellow }
 |h1 { color: red }
 *|h1 { color: green }
 h1 { color: green }

6.2. Selettore universale

Il selettore universale, scritto con l' "asterisco" (*), rappresenta il nome qualificato di ogni tipo di elemento. Esso rappresenta ogni singolo elemento nell'albero del documento in ogni namespace (inclusi quelli senza un namespace dichiarato) se non viene specificato un namespace predefinito. Se viene specificato un namespace predefinito, si veda Selettore universale e namespace più avanti.

Se il selettore universale non è il solo componente di una sequenza di selettori semplici, il * può essere omesso.

Nota: si raccomanda che *, che rappresenta il selettore universale, non sia omesse.

6.2.1. Selettore universale e namespace

Il selettore universale permette un componente di namespace facoltativo. Viene usato come segue:

ns|*

tutti gli elementi nel namespace ns

*|*

tutti gli elementi

|*

tutti gli elementi senza un namespace dichiarato

*

se non viene specificato un namespace predefinito, questo è equivalente a *|*. Altrimenti è equivalente a ns|* dove ns è il namespace predefinito.

Un selettore universale che contiene un prefisso di namespace non precedentemente dichiarato è un selettore non valido. Il meccanismo per dichiarare un prefisso di namespace viene lasciato al linguaggio che implementa i selettori. Nei CSS tale meccanismo viene definito nel modulo di Sintassi Generale.

6.3. Selettori di attributo

I selettori permettono la rappresentazione degli attributi di un elemento. Quando un selettore viene usato come espressione per selezionare un elemento, i selettori di attributo vanno considerati per selezionare l'elemento se tale elemento ha un attributo che corrisponde all'attributo rappresentato dal selettore di attributo.

6.3.1. Presenza di attributo e selettori di valori

I CSS2 hanno introdotto quattro selettori di attributo:

[att]

Rappresenta un elemento con attributo att, qualunque sia il valore dell'attributo.

[att=val]

Rappresenta un elemento con attributo att il cui valore è esattamente "val".

[att~=val]

Rappresenta un elemento con attributo att il cui valore è un elenco di parole separate da spazio bianco, una delle quali è esattamente "val". Se "val" contiene dello spazio bianco, non rappresenterà mai nulla (in quanto le parole sono separate dagli spazi).

[att|=val]

Rappresenta un elemento con attributo att, il cui valore può essere sia esattamente "val" o che comincia con "val" immediatamente seguito da "-" (U+002D). Il suo scopo principale è quello di permettere la selezione delle sottocodifiche delle lingue (per esempio l'attributo hreflang sull'elemento link in HTML) come descritto in RFC 3066 ([RFC3066]). Per la selezione delle sottocodifiche di lang (o xml:lang), si veda la pseudo-classe :lang.

I valori di attributo devono essere identificatori o stringhe. La sensibilità alle maiuscole e alle minuscole dei nomi e dei valori di attributo nei selettori dipende dal linguaggio del documento.

h1[title]

span[class="example"]

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

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

link[hreflang=fr]

link[hreflang|="en"]

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

6.3.2. Selettori di attributo che selezionano sottostringhe

Tre selettori di attributo aggiuntivi sono forniti per selezionare sottostringhe nel valore di un attributo:

[att^=val]

Rappresenta un elemento con attributo att il cui valore inizia con il prefisso "val".

[att$=val]

Rappresenta un elemento con attributo att il cui valore finisce con il suffisso "val".

[att*=val]

Rappresenta un elemento con attributo att il cui valore contiene almeno un'istanza della sottostringa "val".

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

object[type^="image/"]

a[href$=".html"]

p[title*="hello"]

6.3.3. Selettori di attributo e namespace

I selettori di attributo permettono l'uso di un componente di namespace facoltativo per il nome di attributo. Un prefisso di namespace precedentemente dichiarato può essere preposto al nome di attributo separato dal separatore di namespace, la "barra verticale" (|). In conformità con quanto dichiarato per i namespace nella Raccomandazione XML, i namespace predefiniti non si applicano agli attributi, perciò i selettori di attributo senza un componente di namespace si applicano solo agli attributi che non hanno un namespace dichiarato (equivalente e "|attr"). Si può usare un asterisco per il prefisso di namespace, indicante che il selettore selezionerà tutti i nomi di attributo senza considerare il namespace dell'attributo.

Un selettore di attributo con un nome di attributo contenente un prefisso di namespace non precedentemente dichiarato è un selettore non valido. Il meccanismo per dichiarare un prefisso di namespace viene lasciato al linguaggio che implementa i selettori. Nei CSS, tale meccanismo è definito nel modulo di Sintassi Generale.

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

6.3.4. Valori di attributo predefiniti nelle DTD

I selettori di attributo rappresentano valori di attributo definiti esplicitamente nell'albero del documento. I valori di attributo predefiniti possono essere definiti in una DTD o altrove, ma non possono essere sempre selezionati dai selettori di attributo. I selettori dovrebbero essere sviluppati in modo da funzionare anche se i valori predefiniti non sono inclusi nell'albero del documento.

Più precisamente, non si richiede che un programma utente legga un "sottoinsieme esterno" della DTD, ma si richiede che cerchi i valori di attributo predefiniti nel "sottoinsieme interno" del documento. (Si veda [XML10] per le definizioni di questi sottoinsiemi.)

Un programma utente che riconosce un namespace XML [XMLNAMES] non è tenuto a usare la sua conoscenza di tale namespace per trattare i valori di attributo predefiniti come se fossero presenti nel documento. (Per esempio, un programma utente XHTML non è tenuto ad usare la sua conoscenza incorporata della DTD XHTML.)

Nota: Di solito le implementazioni scelgono di ignorare i sottoinsiemi esterni.

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

EXAMPLE[notation=decimal] { /*... impostazioni predefinite della proprietà ...*/ }
EXAMPLE[notation=octal]   { /*... altre impostazioni...*/ }

EXAMPLE                   { /*... impostazioni predefinite della proprietà ...*/ }
EXAMPLE[notation=octal]   { /*... altre impostazioni...*/ }

6.4. Selettori di classe

Lavorando con l'HTML, gli autori possono usare la notazione col punto (U+002E, .) come alternativa alla notazione ~= quando si rappresenta l'attributo class. In questo modo, per l'HTML, div.value e div[class~=value] hanno lo stesso significato. Il valore di attributo deve immediatamente seguire il "punto" (.).

I programmi utente possono applicare i selettori usando la notazione col punto (.) nei documenti XML se il programma utente ha la conoscenza specifica del namespace che gli permette di stabilire quale attributo sia l'attributo "class" per il rispettivo namespace. Un esempio di tale conoscenza si trova nelle specifiche a riguardo di un particolare namespace (per esempio SVG 1.0 [SVG] descrive l'attributo SVG "class" e come un programma utente debba interpretarlo, e similmente MathML 1.01 [MATH] descrive l'attributo MathML "class".)

*.pastoral { color: green }  /* tutti gli elementi con class~=pastoral */

.pastoral { color: green }  /* tutti gli elementi con class~=pastoral */

H1.pastoral { color: green }  /* elementi H1 con class~=pastoral */

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

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

p.pastoral.marine { color: green }

Nota: Dato che i CSS danno un considerevole potere all'attributo "class" gli autori potrebbero, in teoria, sviluppare un proprio "linguaggio del documento" basato su elementi quasi senza alcuna presentazione associata (come DIV e SPAN in HTML), assegnandogli informazioni di stile tramite l'attributo "class". Gli autori dovrebbero evitare questa pratica, in quanto gli elementi strutturali di un linguaggio del documento spesso possiedono significati riconosciuti ed accettati, mentre questo non vale per le classi definite dagli autori.

Nota: Se un elemento ha attributi di classe multipli, i loro valori devono essere concatenati con degli spazi tra i valori prima di ricercare la classe. Attualmente il gruppo di lavoro non è a conoscenza delle modalità in cui si verifica questa situazione, quindi questo comportamento è esplicitamente non-normativo in questa specifica.

6.5. Selettori di ID

I linguaggi del documento possono contenere determinati attributi che vengono dichiarati di tipo ID. Quello che rende speciali gli attributi di tipo ID è che due attributi non possono avere lo stesso valore in un documento, senza tener conto dell'elemento al quale si riferiscono; qualunque sia il linguaggio del documento, un attributo di tipo ID viene usato per identificare in modo univoco il suo elemento. In HTML tutti gli attributi ID vengono chiamati "id"; le applicazioni XML possono chiamarli in modo diverso, ma vengono applicate le medesime restrizioni.

Un attributo di tipo ID di un linguaggio del documento consente agli autori di assegnare un identificatore ad una sola istanza dell'elemento nell'albero del documento. I selettori di ID W3C rappresentano un'istanza dell'elemento basata sul suo identificatore. Un selettore di ID contiene un "segno di numero" (U+0023, #) immediatamente seguito dal valore di ID, che deve essere un identificatore.

I selettori non specificano come un programma utente riconosca un attributo di tipo ID di un elemento. Il programma utente può, per esempio, letta la DTD del documento, avere l'informazione inserita oppure richiederla all'utente.

h1#chapter1

#chapter1

*#z98y

Nota. In XML 1.0 [XML10], l'informazione su quale attributo contiene l'ID di un elemento si trova in una DTD o in uno schema. Quando avviene il parsing dell'XML, i programmi utente non sempre leggono la DTD, ed in questo modo possono non conoscere quale sia l'ID di un elemento (sebbene un programma utente possa essere a conoscenza del namespace specifico che gli consente di determinare quale attributo sia l'ID per tale namespace). Se un designer sa o sospetta che un programma utente può non conoscere quale sia l'ID di un elemento, dovrebbe usare i normali selettori di attributo: [name=p371] invece di #p371. Gli elementi nei documenti XML 1.0 senza una DTD non hanno affatto ID.

Se un elemento ha attributi ID multipli, ciascuno di essi deve essere trattato per gli scopi del selettore di ID. Una tale situazione si può ottenere usando mescolanze di xml:id, DOM3 Core, DTD XML, e conoscenza del namespace specifico.

6.6. Pseudo-classi

Il concetto di pseudo-classe viene introdotto per permettere la selezione in base alle informazioni che si trovano all'esterno dell'albero del documento e che non si può esprimere usando gli altri selettori semplici.

Una pseudo-classe consiste sempre di "due punti" (:) seguiti dal nome della pseudo-classe e facoltativamente da un valore tra parentesi.

Le pseudo-classi sono ammesse in tutte le sequenze di selettori semplici contenuti in un selettore. Le pseudo-classi sono ammesse in qualsiasi punto delle sequenze di selettori semplici, dopo il selettore di tipo o il selettore universale (possibilmente omesso). I nomi delle pseudo-classi non sono sensibili alle maiuscole e alle minuscole. Alcune pseudo-classi sono reciprocamente esclusive, mentre altre possono essere applicate simultaneamente sullo stesso elemento. Le pseudo-classi possono essere dinamiche, nel senso che un elemento acquisisce o perde una pseudo-classe mentre l'utente interagisce col documento.

6.6.1. Pseudo-classi dinamiche

Le pseudo-classi dinamiche classificano gli elementi in base a caratteristiche diverse dal loro nome, dagli attributi, dal contenuto o in generale in base a caratteristiche non deducibili dall'albero del documento.

Le pseudo-classi dinamiche non compaiono nel documento sorgente o nell'albero del documento.

Le pseudo-classi dei link: :link e :visited

I programmi utente di solito visualizzano i link non visitati in modo diverso da quelli precedentemente visitati. I selettori forniscono le pseudo-classi :link e :visited per distinguerli:

• La pseudo-classe :link si applica ai link che non sono stati ancora visitati.
• La pseudo-classe :visited si applica una volta che il link è stato visitato dall'utente.

Dopo un certo periodo di tempo, i programmi utente possono scegliere di riportare un link visitato allo stato ':link' (non visitato).

I due stati sono reciprocamente esclusivi.

a.external:visited

Nota: È possibile per gli autori abusare delle pseudo-classi :link e :visited per determinare quali siti sono stati visitati dall'utente senza il consenso di quest'ultimo.

I programmi utente possono quindi trattare tutti i link come non visitati, o implementare altre misure atte a preservare la privacy dell'utente quando vengono resi in modo differente i link visitati e non visitati.

Le pseudo-classi dell'azione utente :hover, :active, e :focus

I programmi utente interattivi a volte cambiano la resa a seconda delle azioni dell'utente. I selettori forniscono tre pseudo-classi per selezionare un elemento su cui l'utente sta agendo.

• La pseudo-classe :hover si applica mentre l'utente sceglie un elemento con un dispositivo di puntamento, ma non lo attiva. Per esempio, un programma utente visuale potrebbe applicare questa pseudo-classe quando il cursore (puntatore del mouse) si trova sopra ad un box generato dall'elemento. I programmi utente che non supportano i media interattivi non devono supportare questa pseudo-classe. I programmi utente conformi che supportano i media interattivi possono non essere in grado di supportare questa pseudo-classe (per esempio un dispositivo a penna che non riconosce l'hover).
• La pseudo-classe :active si applica mentre un elemento viene attivato dall'utente. Per esempio, nell'arco di tempo in cui l'utente preme il bottone del mouse e lo rilascia.
• La pseudo-classe :focus si applica mentre un elemento ha il focus (ossia quando accetta eventi del mouse e della tastiera, o altre forme di input).

Vi possono essere limiti nel linguaggio del documento o nell'implementazione specifica su quali elementi possono divenire :active o acquisire :focus.

Queste pseudo-classi non sono reciprocamente esclusive. Un elemento può essere selezionato al contempo da diverse pseudo-classi.

I selettori non definiscono se il genitore di un elemento nello stato ':active' o ':hover' sia anch'esso nel medesimo stato.

a:link    /* link non visitati */
a:visited /* link visitati */
a:hover   /* passaggio del mouse dell'utente */
a:active  /* link attivi */

a:focus
a:focus:hover

Nota: Un elemento può essere sia ':visited' e ':active' (o ':link' e ':active').

6.6.2. La pseudo-classe :target

Alcuni URI si riferiscono ad una posizione all'interno di una risorsa. Questo tipo di URI termina con un "simbolo di numero" (#) seguito da un identificatore di ancora (detto identificatore di frammento).

Gli URI con identificatori di frammento conducono ad un certo elemento all'interno del documento, conosciuto come elemento di destinazione [target, N.d.T.]. Per esempio, ecco un URI che punta ad un'ancora chiamata section_2 in un documento HTML:

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

Un elemento di destinazione può essere rappresentato dalla pseudo-classe :target. Se l'URI del documento non ha un identificatore di frammento, allora il documento non ha un elemento di destinazione.

p.note:target

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

6.6.3. La pseudo-classe della lingua :lang

Se il linguaggio del documento specifica come viene determinata la lingua umana di un elemento, è possibile scrivere selettori che rappresentino un elemento sulla base della sua lingua. Per esempio, in HTML [HTML4], la lingua viene determinata da una combinazione dell'attributo lang, dell'elemento meta, e possibilmente dalle informazioni del protocollo (come gli header HTTP). XML usa l'attributo xml:lang, e possono esservi altri metodi specifici del linguaggio per determinare la lingua.

La pseudo-classe :lang(C) rappresenta un elemento che ha la lingua C. Se un elemento viene rappresentato da un selettore :lang(), ci si basa solo sull'identificatore C che deve essere uguale al valore della lingua dell'elemento (o ad una sottostringa separata dal trattino), nello stesso modo in cui si agisce con l'operatore '|=' nei selettori di attributo. L'identificatore C non deve essere necessariamente un nome di lingua valido.

C non deve essere vuoto. (Se lo è, il selettore non è valido.)

Nota: Si raccomanda che i documenti e i protocolli indichino la lingua usando i codici presi da RFC 3066 [RFC3066] o dai suoi successori, e tramite gli attributi "xml:lang" nel caso dei documenti basati su XML [XML10]. Si veda "FAQ: codici di lingua a due o a tre lettere."

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

6.6.4. Le pseudo-classi degli stati degli elementi della UI

[UI, User Interface, Interfaccia Utente, N.d.T.]

Le pseudo-classi :enabled e :disabled

La pseudo-classe :enabled permette agli autori di personalizzare l'aspetto degli elementi dell'interfaccia utente che sono abilitati — ossia quelli che l'utente può selezionare o attivare in qualche modo (per esempio cliccando su un bottone col mouse). Vi è il bisogno di una tale pseudo-classe in quanto non esiste un modo specifico per determinare, poniamo, l'aspetto di un elemento input abilitato senza anche specificare come dovrebbe apparire quando viene disabilitato.

Simile a :enabled, :disabled permette all'autore di specificare con precisione l'aspetto di un elemento dell'interfaccia utente disabilitato o inattivo.

La maggior parte degli elementi non sarà né abilitata né disabilitata. Un elemento si dice abilitato quando l'utente è in grado di attivarlo o di trasferire il focus su di esso. Un elemento si dice disabilitato quando potrebbe essere abilitato, ma l'utente non è in grado di attivarlo o di trasferire il focus su di esso.

La pseudo-classe :checked

Gli elementi radio e le caselle di selezione [checkbox, N.d.T.] possono essere selezionati dall'utente. Alcune voci di menu sono già "selezionate" [checked, N.d.T.] quando l'utente le seleziona. Quando tali elementi vengono "bloccati", viene applicata la pseudo-classe :checked. La pseudo-classe :checked si applica inizialmente a quegli elementi che hanno gli attributi HTML4 selected e checked come descritto nella Sezione 17.2.1 di HTML4, ma naturalmente l'utente può "sbloccare" tali elementi nel qual caso la pseudo-classe :checked non viene applicata. Poichè la pseudo-classe :checked è dinamica per natura, viene alterata dall'azione dell'utente e si basa anche sulla presenza degli attributi semantici HTML4 selected e checked, viene applicata a tutti i media.

La pseudo-classe :indeterminate

6.6.5. Pseudo-classi strutturali

I selettori introducono il concetto di pseudo-classi strutturali per permettere la selezione in base ad informazioni extra che si trovano nell'albero del documento, ma che non possono essere rappresentate da altri selettori semplici o combinatori.

Si noti che i segmenti autonomi di PCDATA (nodi testuali nel DOM) non vengono tenuti in considerazione quando si calcola la posizione di un elemento nell'elenco dei figli del suo genitore. Quando si calcola la posizione di un elemento in tale elenco, l'indice di numerazione parte da 1.

pseudo-classe :root

La pseudo-classe :root rappresenta l'elemento radice del documento. In HTML 4, è sempre l'elemento HTML.

pseudo-classe :nth-child()

La pseudo-classe :nth-child(an+b) rappresenta un elemento che ha an+b-1 fratelli prima di lui nell'albero del documento, per un dato valore positivo intero o zero uguale a n, e che ha un elemento genitore. In altre parole, questo selettore seleziona il bn-esimo figlio di un elemento dopo che tutti i figli sono stati divisi ciascuno in gruppi di a elementi. Per esempio, questo permette ai selettori di essere applicati su righe diverse di una tabella, e potrebbe essere usato per alternare il colore di un paragrafo di testo in un ciclo di quattro I valori a e b devono essere zero, interi negativi o interi positivi. L'indice del primo figlio di un elemento è 1.

Oltre a questo, :nth-child() può assumere 'odd' e 'even' come argomenti. 'odd' ha lo stesso significato di 2n+1, e 'even' quello di 2n.

tr:nth-child(2n+1) /* rappresenta ogni riga dispari di una tabella HTML  */
tr:nth-child(odd)  /* lo stesso */
tr:nth-child(2n)   /* rappresenta ogni riga pari di una tabella HTML */
tr:nth-child(even) /* lo stesso */

/* Colori alternati dei paragrafi nel 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; }

Quando a=0, non si usa la ripetizione, quindi, ad esempio, :nth-child(0n+5) seleziona solo il quinto figlio. Quando a=0, la parte an non ha bisogno di essere inclusa, ed in questo modo la sintassi si semplifica in :nth-child(b) e l'ultimo esempio si semplifica in :nth-child(5).

foo:nth-child(0n+1)   /* rappresenta un elemento foo, 
primo figlio del suo elemento genitore */
foo:nth-child(1)      /* lo stesso */

Quando a=1, il numero può essere omesso dalla regola.

bar:nth-child(1n+0)   /* rappresenta tutti gli elementi bar, specificità (0,1,1) */
bar:nth-child(n+0)    /* lo stesso */
bar:nth-child(n)      /* lo stesso */
bar                   /* lo stesso, ma con specificità più bassa (0,0,1) */

Se b=0, allora viene preso ogni an-esimo elemento. In tal caso, la parte b può essere omessa.

tr:nth-child(2n+0) /* rappresenta ogni riga pari di una tabella HTML  */
tr:nth-child(2n) /* lo stesso */

Se a e b sono uguali a zero, la pseudo-classe non rappresenta alcun elemento nell'albero del documento.

Il valore a può essere negativo, ma solo i valori positivi di an+b, per n≥0, possono rappresentare un elemento nell'albero del documento.

html|tr:nth-child(-n+6)  /* rappresenta le prime 6 righe delle tabelle XHTML */

Quando il valore b è negativo, il carattere "+" nell'espressione deve essere rimosso (viene effettivamente rimpiazzato dal carattere "-" che indica il valore negativo di b).

:nth-child(10n-1)  /* rappresenta il 9°, 19°, 29° elemento, ecc. */
:nth-child(10n+9)  /* Lo stesso */
:nth-child(10n+-1) /* Sintatticamente non valido, quindi ignorato */

pseudo-classe :nth-last-child()

La pseudo-classe :nth-last-child(an+b) rappresenta un elemento che ha an+b-1 fratelli dopo di lui nell'albero del documento, per un dato valore positivo intero o zero di n, e che ha un elemento genitore. Si veda la pseudo-classe :nth-child() per la sintassi dei suoi argomenti. Accetta anche i valori 'even' e 'odd' come argomenti.

tr:nth-last-child(-n+2)    /* rappresenta le due ultime righe di una tabella HTML  */

foo:nth-last-child(odd)    /* rappresenta tutti gli elementi dispari foo nel loro elemento genitore,
                              contando a partire dall'ultimo */

pseudo-classe :nth-of-type()

La pseudo-classe :nth-of-type(an+b) rappresenta un elemento che ha an+b-1 fratelli con lo stesso nome di elemento prima di lui nell'albero del documento, per un dato valore uguale a zero o a un intero positivo di n, e che ha un elemento genitore. In altre parole, questo selettore seleziona il bn-esimo figlio di quel tipo dopo che tutti i figli di tale tipo sono stati divisi in gruppi di un elemento ciascuno. Si veda la pseudo-classe :nth-child() per la sintassi dei suoi argomenti. Accetta anche i valori 'even' e 'odd'.

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

pseudo-classe :nth-last-of-type()

La pseudo-classe :nth-last-of-type(an+b) rappresenta un elemento che ha an+b-1 fratelli con lo stesso nome di elemento dopo di lui nell'albero del documento, per un valore dato pari a zero o ad intero positivo di n, e che ha un elemento genitore. Si veda la pseudo-classe :nth-child() per la sintassi dei suoi argomenti. Accetta anche i valori 'even' e 'odd'.

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

body > h2:not(:first-of-type):not(:last-of-type)

pseudo-classe :first-child

Lo stesso che :nth-child(1). La pseudo-classe :first-child rappresenta un elemento che è il primo figlio di un altro elemento.

div > p:first-child

<p> L'ultimo P prima di 'note'.</p>
<div class="note">
   <p> Il primo P dentro 'note'.</p>
</div>

<p> L'ultimo P prima di 'note'.</p>
<div class="note">
   <h2> Note </h2>
   <p> Il primo P dentro 'note'.</p>
</div>

* > a:first-child /* a è il primo figlio di qualsiasi elemento */
a:first-child /* Lo stesso (presupponendo che a non sia l'elemento radice) */

pseudo-classe :last-child

Lo stesso che :nth-last-child(1). La pseudo-classe :last-child rappresenta un elemento che è l'ultimo figlio di un altro elemento.

ol > li:last-child

pseudo-classe :first-of-type

Lo stesso che :nth-of-type(1). La pseudo-classe :first-of-type rappresenta un elemento che è il primo fratello del suo tipo nell'elenco dei figli del suo elemento genitore.

dl dt:first-of-type

<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>

pseudo-classe :last-of-type

Lo stesso che :nth-last-of-type(1). La pseudo-classe :last-of-type rappresenta un elemento che è l'ultimo fratello del suo tipo in un elenco dei figli del suo elemento genitore.

tr > td:last-of-type

pseudo-classe :only-child

Rappresenta un elemento che ha un elemento genitore e il cui elemento genitore non ha altri elementi figli. Lo stesso che :first-child:last-child o :nth-child(1):nth-last-child(1), ma con una specificità inferiore.

pseudo-classe :only-of-type

Rappresenta un elemento che ha un elemento genitore e il cui elemento genitore non ha altri elementi figli col medesimo nome di elemento. Lo stesso che :first-of-type:last-of-type o :nth-of-type(1):nth-last-of-type(1), ma con una specificità inferiore.

pseudo-classe :empty

La pseudo-classe :empty rappresenta un elemento che non ha figli. In termini di DOM, solo i nodi di elemento e i nodi di testo (inclusi i nodi CDATA ed i riferimenti ad entità) i cui dati hanno una lunghezza diversa da zero devono essere considerati soggetti a questa condizione; i commenti, i PI, e altri nodi non hanno influenza sul fatto che un elemento venga considerato vuoto o meno.

<p></p>

<foo>bar</foo>

<foo><bar>bla</bar></foo>

<foo>this is not <bar>:empty</bar></foo>

6.6.6. Vuota

Questa sezione viene intenzionalmente lasciata vuota.

6.6.7. La pseudo-classe di negazione

La pseudo-classe di negazione, :not(X), è una notazione funzionale che assume un selettore semplice (esclusa la pseudo-classe di negazione stessa e gli pseudo-elementi) come argomento. Rappresenta un elemento che non viene rappresentato dall'argomento.

button:not([DISABLED])

*:not(FOO)

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

Le dichiarazioni di namespace predefinite non influenzano l'argomento della pseudo-classe di negazione a meno che l'argomento sia un selettore universale o un selettore di tipo.

*|*:not(*)

*|*:not(:hover)

Nota: la pseudo-classe :not() consente di scrivere selettori inutili. Per esempio :not(*|*), che non rappresenta nessun elemento, o foo:not(bar), che è equivalentew a foo ma con una specificità più alta.

7. Pseudo-elementi

Gli pseudo-elementi creano astrazioni sull'albero del documento che vanno oltre quelle specificate dal linguaggio del documento. Per esempio, i linguaggi del documento non offrono meccanismi per accedere alla prima lettera o alla prima riga del contenuto di un elemento. Gli pseudo-elementi permettono ai designer di far riferimento a tali informazioni altrimenti inaccessibili. Gli pseudo-elementi danno anche ai designer un modo per riferirsi al contenuto che non esiste nel documento sorgente (per esempio gli pseudo-elementi ::before e ::after danno accesso al contenuto generato).

Uno pseudo-elemento consiste in due punti (::) seguito dal nome dello pseudo-elemento.

La notazione :: viene introdotta in questo documento per operare una distinzione tra pseudo-classi e pseudo-elementi. Per la compatibilità con i fogli di stile esistenti, i programmi utente devono anche accettare la precedente notazione con i due punti singoli per gli pseudo-elementi introdotti nei CSS 1 e 2 (ossia :first-line, :first-letter, :before e :after). Questa compatibilità non è permessa per gli pseudo-elementi introdotti nei CSS di livello 3.

Solo uno pseudo-elemento può ricorrere per ciascun selettore, e, se presente, deve comparire dopo la sequenza di selettori semplici che rappresenta i soggetti del selettore. Una futura versione di questa specifica potrà ammettere pseudo-elementi multipli per selettore.

7.1. Lo pseudo-elemento ::first-line

Lo pseudo-elemento ::first-line descrive i contenuti della prima riga formattata di un elemento.

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

Il selettore p::first-line non seleziona un reale elemento HTML. Seleziona uno pseudo-elemento che i programmi utente conformi inseriranno all'inizio di ogni paragrafo.

Si noti che la lunghezza della prima riga dipende da un numero di fattori, tra cui la larghezza della pagina, la dimensione del font, ecc. Quindi un normale paragrafo HTML come:

<P>Questo è un lungo paragrafo
HTML che viene diviso in diverse righe.
La prima riga viene identificata da una
sequenza di tag fittizi. 
Le altre righe verranno trattate come
normali righe nel paragrafo.
</P>

le cui righe verranno trattate come:

QUESTO È UN LUNGO PARAGRAFO HTML
che viene diviso in diverse righe.
La prima riga viene identificata da una
sequenza di tag fittizi.
Le altre righe verranno trattate come
normali righe nel paragrafo.

Questo paragrafo viene "riscritto" dai programmi utente per includere la sequenza di tag fittizi per ::first-line. Questa sequenza di tag fittizi aiuta a mostrare come vengono ereditate le proprietà.

<P><P::first-line> Questo è un lungo
paragrafo HTML 
che </P::first-line> viene diviso in diverse righe.
La prima riga viene identificata da una
sequenza di tag fittizi. Le altre righe
verranno trattate come normali righe
nel paragrafo.
</P>

Se uno pseudo-elemento spezza un elemento reale, l'effetto desiderato viene spesso descritto da una sequenza di tag fittizi che chiude e poi riapre l'elemento. Quindi, se marchiamo il precedente paragrafo con un elemento span:

<P><SPAN class="test"> Questo è un lungo
paragrafo HTML che viene diviso in diverse righe.
</SPAN> La prima riga viene identificata
da una sequenza di tag fittizi. Le altre righe verranno
trattate come normali righe nel paragrafo.
</P>

il programma utente può simulare i tag di apertura e chiusura per span quando inserisce la sequenza di tag fittizi su ::first-line.

<P><P::first-line><SPAN class="test"> Questo è un
lungo paragrafo HTML
che viene </SPAN></P::first-line><SPAN class="test"> 
diviso in diverse righe.
</SPAN> La prima riga viene identificata
da una sequenza di tag fittizi.
Le altre righe verranno trattate
come normali righe nel paragrafo.
</P>

Nei CSS, lo pseudo-elemento ::first-line può essere unito solo ad un elemento a livello di blocco, inline-block, table-caption, o table-cell.

La "prima riga formattata" di un elemento può ricorrere all'interno di un discendente di blocco nel medesimo flusso (ossia un discendente di blocco che non è posizionato e non è un float). Per esempio, la prima riga del div in <DIV><P>Questa riga...</P></DIV> è la prima riga di p (presupponendo che sia p che div siano a livello di blocco).

La prima riga di un elemento table-cell o inline-block non può essere la prima riga formattata di un elemento antenato. Quindi, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> la prima riga formattata del div non è la riga "Hello".

Si noti che la prima riga di p in questo frammento: <p><br>Primo... non contiene nessuna lettera (presupponendo lo stile predefinito di br in HTML 4). La parola "Primo" non è la prima riga formattata.

Un programma utente dovrebbe comportarsi come se i tag fittizi di apertura degli pseudo-elementi ::first-line fossero annidati all'interno dell'elemento contenitore di blocco più interno. (Poichè i CSS1 e i CSS2 non si sono pronunciati su questo caso, gli autori non dovrebbero fare affidamento su questo comportamento.) Ecco un esempio. La sequenza di tag fittizi per

<DIV>
  <P>Primo paragrafo</P>
  <P>Secondo paragrafo</P>
</DIV>

è

<DIV>
  <P><DIV::first-line><P::first-line>Primo paragrafo</P::first-line></DIV::first-line></P>
  <P><P::first-line>Secondo paragrafo</P::first-line></P>
</DIV>

Lo pseudo-elemento ::first-line è simile a un elemento di livello inline, ma con alcune restrizioni. Nei CSS, le seguenti proprietà si applicano allo pseudo-elemento ::first-line: proprietà dei font, proprietà del colore, proprietà dello sfondo, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height'. I programmi utente possono applicare anche altre proprietà.

7.2. Lo pseudo-elemento ::first-letter

Lo pseudo-elemento ::first-letter rappresenta la prima lettera della prima riga di un blocco, se non viene preceduto da altro contenuto (come immagini o tabelle inline), sulla sua riga. Questo pseudo-elemento può essere usato per le iniziali e i capolettera, che sono comuni effetti tipografici. Il tipo di lettera iniziale è simile ad un elemento inline se la proprietà 'float' è 'none'; altrimenti è simile ad un elemento flottato.

Nei CSS, le seguenti proprietà si applicano allo pseudo-elemento ::first-letter: proprietà dei font, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (se appropriata), 'line-height', 'float', 'vertical-align' (solo se 'float' è 'none'), proprietà del margine, proprietà del padding, proprietà del bordo, proprietà del colore, proprietà dello sfondo. I programmi utente possono anche applicare altre proprietà. Per permette ai programmi utente di rendere le iniziali o i capolettera in modo tipograficamente corretto, i programmi utente possono scegliere un'interlinea, una larghezza ed una altezza in base alla forma della lettera, differentemente dai normali elementi.

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>Capolettera iniziale</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>Le prime</SPAN> parole di un articolo
    dell'Economist.</P>
 </BODY>
</HTML>

<P>
<SPAN>
<P::first-letter>
L
</P::first-letter>e prime
</SPAN> 
parole di un articolo dell'Economist.
</P>

Per ottenere la tradizionale formattazione dei capolettera, i programmi utente possono approssimare le dimensioni dei font, per esempio per allineare le righe di base. Inoltre il contorno del glifo può essere preso in considerazione nella formattazione.

La punteggiatura (ossia i caratteri definiti in Unicode nelle classi di punteggiatura "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) e "other" (Po) ), che precede o segue la prima lettera dovrebbe essere inclusa. [UNICODE]

::first-letter si applica anche se la prima lettera è una cifra, per esempio il "6" in "67 milioni di dollari sono una grossa somma."

Nei CSS, lo pseudo-elemento ::first-letter si applica a elementi block, list-item, table-cell, table-caption, e inline-block. Una futura versione di questa specifica potrà permettere l'applicazione di questo pseudo-elemento ad ulteriori tipi di elemento.

Lo pseudo-elemento ::first-letter si usa con tutti quegli elementi che contengono testo, o che hanno un discendente nel flusso che contiene testo. Un programma utente dovrebbe comportarsi come se il tag fittizio di apertura di questo pseudo-elemento si trovi appena prima del primo testo dell'elemento, anche se tale testo si trova in un discendente.

<div>
<p>Il primo testo.

<div>
<p><div::first-letter><p::first-letter>I</...></...>l primo testo.

La prima lettera di un elemento table-cell o inline-block non può essere la prima lettera di un elemento antenato. Quindi, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> la prima lettera del div non è "H". Infatti, il div non ha una prima lettera.

La prima lettera deve ricorrere nella prima riga formattata. Per esempio, in questo frammento: <p><br>Primo... la prima riga non contiene nessuna lettera e ::first-letter non seleziona nulla (presupponendo lo stile predefinito di br in HTML 4). In particolare, non seleziona la "P" di "Primo."

Nei CSS, se un elemento è una voce di lista ('display: list-item'), ::first-letter si applica alla prima lettera nel box principale dopo il marcatore. I programmi utente possono ignorare ::first-letter sulle voci di lista con 'list-style-position: inside'. Se un elemento ha contenuto ::before o ::after, ::first-letter si applica alla prima lettera dell'elemento incluso tale contenuto.

Alcune lingue possono avere regole specifiche per 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.

Se le lettere che formano ::first-letter non si trovano nello stesso elemento, come "'T" in <p>'<em>T..., il programma utente può creare uno pseudo-elemento ::first-letter da uno degli elementi, da entrambi o non crearlo affatto.

Similmente, se la prima lettera(e) del blocco non si trova all'inizio della riga (per esempio a causa del riordinamento bidirezionale), allora il programma utente non ha bisogno di creare lo pseudo-elemento(i).

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

<P>Del testo che finisce su due righe</P>

<P>
<P::first-line>
<P::first-letter> 
D 
</P::first-letter>el testo che 
</P::first-line> 
finisce su due righe 
</P>

7.3. Lo pseudo-elemento ::selection

Lo pseudo-elemento ::selection si applica sulla parte di documento sottolineata dall'utente. Si applica anche, per esempio, al testo contenuto in un campo di testo editabile. Questo pseudo-elemento non dovrebbe essere confuso con la pseudo-classe :checked.

Sebbene lo pseudo-elemento ::selection è dinamico per natura, e viene alterato dall'azione dell'utente, è lecito aspettarsi che quando un programma utente rende il documento su un media statico (come una pagina stampata, si veda [CSS21]), documento originariamente concepito per un media dinamico (come lo schermo), il programma utente voglia trasferire lo stato ::selection su un altro media, e voglia mantenere la formattazione e la resa appropriata. Questo non è richiesto — i programmi utente possono omettere lo pseudo-elemento ::selection per i media statici.

Le proprietà CSS che si applicano allo pseudo-elemento ::selection sono: colore, sfondo, cursore (facoltativo), contorno (facoltativo). Il valore calcolato della proprietà 'background-image' su ::selection può essere ignorato.

7.4. Gli pseudo-elementi ::before e ::after

Gli pseudo-elementi ::before e ::after possono essere usati per descrivere il contenuto generato prima o dopo il contenuto di un elemento. Sono spiegati nei CSS 2.1 [CSS21].

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

8. Combinatori

8.1. Combinatori del discendente

A volte gli autori possono volere che i selettori descrivano un elemento che è il discendente di un altro elemento nell'albero del documento (per esempio un elemento EM contenuto in un elemento H1 ). I combinatori del discendente descrivono una tale relazione. Un combinatore discendente è uno spazio bianco che separa due sequenze di selettori semplici. Un selettore che ha la forma "A B" rappresenta un elemento B che è un discendente arbitrario di un elemento antenato A.

h1 em

<h1>Questo <span class="myclass">titolo
è <em>molto</em> importante</span></h1>

div * p

div p *[href]

8.2. Combinatori del figlio

Un combinatore del figlio descrive un rapporto padre-figlio tra due elementi. Questo combinatore consta di un carattere "più grande di" (>) che separa due sequenze di selettori semplici.

body > p

div ol>li p

Per informazioni sulla selezione del primo figlio di un elemento, si veda la sezione sulla pseudo-classe :first-child di cui sopra.

8.3. Combinatori del fratello

Ci sono due diversi combinatori del fratello: il combinatore del fratello adiacente e il combinatore del fratello generale. In entrambi i casi, i nodi non di elemento (per esempio tra elementi di testo) sono ignorati quando si considera l'adiacenza degli elementi.

8.3.1. Combinatore del fratello adiacente

Il combinatore del fratello adiacente è costituito dal carattere di "segno più" (U+002B, +) che separa due sequenze di selettori semplici. Gli elementi rappresentati dalle due sequenze condividono lo stesso genitore nell'albero del documento e l'elemento rappresentato dalla prima sequenza precede immediatamente l'elemento rappresentato dalla seconda.

math + p

h1.opener + h2

8.3.2. Combinatore del fratello generale

Il combinatore del fratello generale è costituito dal carattere "tilde" (U+007E, ~) che separa due sequenze di selettori semplici. Gli elementi rappresentati dalle due sequenze condividono lo stesso genitore nell'albero del documento e l'elemento rappresentato dalla prima sequenza precede (non necessariamente nell'immediato) l'elemento rappresentato dalla seconda.

h1 ~ pre

<h1>Definizione della funzione a</h1>
<p>La funzione a(x) si deve applicare a tutte le figure nella tabella.</p>
<pre>funzione a(x) = 12x/13.5</pre>

9. Calcolare la specificità di un selettore

La specificità di un selettore si calcola come segue:

• si conti il numero di selettori ID nel selettore (= a)
• si conti il numero di selettori di classe, di selettori di attributo e di pseudo-classi nel selettore (= b)
• si conti il numero di nomi di elemento nel selettore (= c)
• si ignorino gli pseudo-elementi

I selettori all'interno di una pseudo-classe di negazione sono calcolati come gli altri, ma la negazione non conta come pseudo-classe.

Concatenando i tre numeri a-b-c (in un sistema numerico a base larga) si ottiene la specificità.

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

Nota: la specificità degli stili dati in un attributo HTML style viene descritta nei CSS 2.1. [CSS21].

10. La grammatica dei selettori

10.1. Grammatica

Questa grammatica descrive la sintassi dei selettori. Globalmente è LL(1) e può essere localmente LL(2) (ma si noti che molti programmi utente non dovrebbero usarla direttamente, poichè non esprime convenzioni di parsing). Il formato delle produzioni è ottimizzato per l'uso umano e vengono usate alcune notazioni abbreviate oltre Yacc (si veda [YACC]) :

• *: 0 o più
• +: 1 o più
• ?: 0 o 1
• |: separa le alternative
• [ ]: raggruppamento

Le produzioni sono:

selectors_group
  : selector [ COMMA S* selector ]*
  ;

selector
  : simple_selector_sequence [ combinator simple_selector_sequence ]*
  ;

combinator
  /* i possono essere circondati da spazio bianco */
  : 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
  /* '::' inizia uno pseudo-elemento, ':' una pseudo-classe */
  /* Eccezioni: :first-line, :first-letter, :before e :after. */
  /* Si noti che si limitano gli pseudo-elementi ad uno per selettore e */
  /* ricorrono solo nell'ultima simple_selector_sequence. */
  : ':' ':'? [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* expression ')'
  ;

expression
  /* Nei CSS3, le espressioni sono identificatori, stringhe, */
  /* o della forma "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. Scanner lessicale

Il seguente è il tokenizzatore, scritto in notazione Flex (si veda [FLEX]). Il tokenizzatore non è sensibile alle maiuscole e alle minuscole.

Le due ricorrenze di "\377" rappresentano il numero di carattere più alto gestibile dalle attuali versioni di Flex (decimale 255). Dovrebbero essere lette come "\4177777" (decimale 1114111), ossia il punto di codifica più alto possibile in Unicode/ISO-10646. [UNICODE]

%option case-insensitive

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

%%

[ \t\r\n\f]+     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;
":not("          return NOT;
@{ident}         return ATKEYWORD;
{invalid}        return INVALID;
{num}%           return PERCENTAGE;
{num}{ident}     return DIMENSION;
"<!--"           return CDO;
"-->"            return CDC;

"url("{w}{string}{w}")"                           return URI;
"url("{w}([!#$%&*-~]|{nonascii}|{escape})*{w}")"  return URI;
U\+[0-9a-f?]{1,6}(-[0-9a-f]{1,6})?                return UNICODE_RANGE;

\/\*[^*]*\*+([^/*][^*]*\*+)*\/                    /* ignora i commenti */

.                return *yytext;

11. Namespace e client di livello basso

Un problema importante è l'interazione dei selettori CSS con documenti XML in client web prodotti prima di questo documento. Sfortunatamente, a causa del fatto che i namespace devono essere selezionati in base all'URI che identifica il namespace, non al prefisso di namespace, viene richiesto un meccanismo per identificare i namespace nei CSS secondo i loro URI. Senza un tale meccanismo, non è possibile costruire un foglio di stile CSS che corrisponda correttamente ai selettori in tutti i casi rispetto ad un insieme casuale di documenti XML. Tuttavia, data la completa conoscenza del documento XML a cui applicare il foglio di stile, e un uso limitato dei namespace all'interno del documento XML, è possibile costruire un foglio di stile in cui i selettori selezioneranno correttamente gli elementi e gli attributi.

Si dovrebbe notare che un client CSS di basso livello ignorerà (se conforme alle regole di parsing compatibili nel futuro dei CSS) tutte le regole-a @namespace, e tutte le regole di stile che fanno uso del tipo di elemento qualificato con namespace o i selettori di attributo. La sintassi usata per delimitare i prefissi di namespace nei CSS è stata scelta allo scopo di far ignorare ai client di basso livello le regole di stile piuttosto che fargliele applicare scorrettamente.

L'uso dei namespace predefiniti nei CSS rende possibile scrivere selettori di tipo di elemento che funzioneranno sia nei client che riconoscono il namespace sia in quelli di basso livello. Si dovrebbe notare che tali client possono applicare selezioni scorrette rispetto ad elementi XML in altri namespace.

Seguono degli scenari e degli esempi in cui è possibile costruire fogli di stile che funzioneranno in client web che non implementano questa proposta.

1. Il documento XML non usa namespace.

   • In questo caso, non è necessario dichiarare o usare namespace nel foglio di stile. Tipi di elemento CSS standard e selettori di attributo funzioneranno in modo adeguato in un client di basso livello.
   • In un client CSS che riconosce i namespace, il comportamento predefinito dei selettori di elemento che selezionano in base al namespace funzioneranno rispetto a tutti gli elementi, poichè non sono presenti namespace. Tuttavia, l'uso dei selettori specifici di tipo che selezionano solo elementi privi di namespace ("|name") garantirà che i selettori selezioneranno solo elementi XML che non hanno un namespace dichiarato.

2. Il documento XML definisce un singolo namespace predefinito usato in tutto il documento. Non vengono usati prefissi di namespace nei nomi di elemento.

   • In questo caso, un client di livello basso funzionerà come se i namespace non fossero affatto usati nel documento XML. I tipi di elemento standard CSS e i selettori di attributo selezioneranno tutti gli elementi.

3. Il documento XML non usa un namespace predefinito, tutti i prefissi di namespace usati sono conosciuti all'autore del foglio di stile, e vi è correlazione diretta tra prefissi di namespace e URI dei namespace. (Un prefisso dato può solo essere correlato ad un solo URI di namespace in tutto il documento XML; vi possono essere selettori multipli correlati allo stesso URI).

   • In questo caso, il client di basso livello vedrà e farà corrispondere tipi di elemento e selettori di attributo in base al loro nome qualificato, non alla parte locale, come spiegato nella sezione Selettori di tipo e namespace. I selettori CSS possono essere dichiarati usando i due punti con escape "\:" per descrivere i nomi qualificati, per esempio "html\:h1" selezionerà <html:h1>. I selettori che usano il nome qualificato selezioneranno solo elementi XML che usano lo stesso prefisso. Altri prefissi di namespace usati nell'XML che sono correlati allo stesso URI non avranno la corrispondenza attesa a meno che non vengano dichiarate per loro regole di stile CSS aggiuntive.
   • Si noti che i selettori dichiarati in questo modo selezioneranno solo nei client di basso livello. Un client CSS che riconosce i namespace userà i tipi di elemento e i selettori di attributo in base alla parte locale del nome. I selettori dichiarati con il nome qualificato completo non selezioneranno (a meno che non vi sia nessun prefisso di namespace nel nome qualificato).

In altri scenari: quando i prefissi di namespace usati nell'XML non sono conosciuti in anticipo dall'autore del foglio di stile, o quando viene usata una combinazione di elementi senza namespace con elementi che usano un namespace predefinito, o lo stesso prefisso di namespace è correlato a differenti URI di namespace all'interno dello stesso documento, o in diversi documenti, non è possibile costruire un foglio di stile CSS che funzioni bene rispetto a tutti gli elementi in questi documenti, a meno che il foglio di stile non sia scritto usando una sintassi degli URI di namespace (come delineato in questo documento et similia) e che il documento venga elaborato da un client CSS che riconosce i namespace XML.

12. Profili

Ogni specifica che usa i selettori deve definire un sottoinsieme di selettori W3C permessi o esclusi, e descrivere il significato locale di tutti i componenti di tale sottoinsieme.

Esempi non normativi:

h1 a[name]

13. Conformità e requisiti

Si definisce la conformità solo con la presente specifica.

La mancata implementazione da parte di un programma utente di questa specifica a causa dei limiti di un particolare dispositivo (per esempio i programmi utenti non interattivi non implementeranno probabilmente le pseudo-classi dinamiche perchè non avrebbe senso senza l'interattività) non implica la non conformità.

Tutte le specifiche che riusano i selettori devono contenere un Profilo che elenca il sottoinsieme di selettori accettati o esclusi, e che descrive le restrizioni poste all'attuale specifica.

L'invalidità è dovuta ad un errore di parsing, per esempio un token sconosciuto o un token non consentito in un determinato punto.

I programmi utente devono osservare le regole per la gestione degli errori di parsing:

• un selettore semplice con un prefisso di namespace non dichiarato non è valido
• un selettore con un selettore semplice non valido, un combinatore non valido o un token non valido non è valido.
• un gruppo di selettori con un selettore non valido non è valido.

Le specifiche che riusano i selettori devono definire come gestire gli errori di parsing. (Nel caso dei CSS, l'intera regola in cui si usa il selettore viene ignorata.)

14. Test

Questa specifica ha una suite di test che consente ai programmi utente di verificare la loro conformità di base. Questa suite non vuole essere esaustiva e non copre tutte le possibilità offerte dai selettori.

15. Riconoscimenti

Il Gruppo di Lavoro sui CSS ringrazia tutti quelli che hanno inviato commenti a questa specifica durante gli anni.

Vorremmo dare un ringraziamento speciale a Donna McManus, Justin Baker, Joel Sklar, e Molly Ives Brower che hanno eseguito l'analisi finale del testo.

16. Riferimenti

[I testi che seguono sono riportati in lingua inglese tranne dove indicato diversamente. N.d.T.]

[CSS1]

Bert Bos, Håkon Wium Lie; "Cascading Style Sheets, level 1", W3C Recommendation, 17 Dec 1996, revised 11 Jan 1999

(http://www.w3.org/TR/REC-CSS1)

[CSS21]

Bert Bos, Tantek Çelik, Ian Hickson, Håkon Wium Lie, editors; "Cascading Style Sheets, level 2 revision 1", W3C Working Draft, 13 June 2005

(http://www.w3.org/TR/CSS21)

[CWWW]

Martin J. Dürst, François Yergeau, Misha Wolf, Asmus Freytag, Tex Texin, editors; "Character Model for the World Wide Web", W3C Recommendation, 15 February 2005

(http://www.w3.org/TR/charmod/)

[FLEX]

"Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213

[HTML4]

Dave Ragget, Arnaud Le Hors, Ian Jacobs, curatori; "Specifiche HTML 4.01", Raccomandazione, 24 December 1999

(http://www.diodati.org/w3c/html401/cover.html)

[MATH]

Patrick Ion, Robert Miner, editors; "Mathematical Markup Language (MathML) 1.01", W3C Recommendation, revision of 7 July 1999

(http://www.w3.org/TR/REC-MathML/)

[RFC3066]

H. Alvestrand; "Tags for the Identification of Languages", Request for Comments 3066, January 2001

(http://www.ietf.org/rfc/rfc3066.txt)

[STTS]

Daniel Glazman; "Simple Tree Transformation Sheets 3", Electricité de France, submission to the W3C, 11 November 1998

(http://www.w3.org/TR/NOTE-STTS3)

[SVG]

Jon Ferraiolo, 藤沢 淳, Dean Jackson, editors; "Scalable Vector Graphics (SVG) 1.1 Specification", W3C Recommendation, 14 January 2003

(http://www.w3.org/TR/SVG/)

[UNICODE]

The Unicode Standard, Version 4.1, The Unicode Consortium. Boston, MA, Addison-Wesley, March 2005. ISBN 0-321-18578-1, as amended by Unicode 4.0.1 and Unicode 4.1.0.

(http://www.unicode.org/versions/)

[XML10]

Tim Bray, Jean Paoli, C. M. Sperberg-McQueen, Eve Maler, François Yergeau, editors; "Extensible Markup Language (XML) 1.0 (Third Edition)", W3C Recommendation, 4 February 2004

(http://www.w3.org/TR/REC-xml/)

[XMLNAMES]

Tim Bray, Dave Hollander, Andrew Layman, editors; "Namespaces in XML", W3C Recommendation, 14 January 1999

(http://www.w3.org/TR/REC-xml-names/)

[YACC]

S. C. Johnson; "YACC — Yet another compiler compiler", Technical Report, Murray Hill, 1975