W3C

Selettori

Bozza di Lavoro W3C 15 Dicembre 2005

Nota del traduttore

La presente traduzione è da intendersi a scopo puramente informativo. Tutti i requisiti normativi si riferiscono unicamente all'originale inglese, che trovate all'indirizzo http://www.w3.org/TR/css3-selectors. Come Bozza di lavoro, il valore di riferimento del presente documento è da considerarsi limitato. Il traduttore si è attenuto alla semplice traduzione e ad aggiungere la presente classe nel foglio di stile. La marcatura è quella del documento originale

Sono state inserite delle note solo dove opportuno, tramite parentesi quadre in cui è stato posto il termine seguito dall'abbreviazione "N.d.T." (Nota del Traduttore). Per errori nella traduzione scrivete pure a css.zibaldone@gmail.com specificando nel soggetto "Selettori CSS3: errori nella traduzione" oltre al numero di riga in cui è presente l'errore. Data la mole del documento, vi raccomando la massima precisione. Grazie.

CSS Zibaldone | Gabriele Romanato

Questa versione:
http://www.w3.org/TR/2005/WD-css3-selectors-20051215
Ultima versione:
http://www.w3.org/TR/css3-selectors
Precedente versione:
http://www.w3.org/TR/2001/CR-css3-selectors-20011113
Curatori:
Daniel Glazman (Esperto Invitato)
Tantek Çelik (Esperto Invitato)
Ian Hickson (Google)
Peter Linss (precedente curatore, Netscape/AOL)
John Williams (precedente curatore, Quark, Inc.)

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.

Contenuti

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:

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:

Pattern Significato Descritto nella sezione Definito per la prima volta nei CSS di livello
* ogni elemento Selettore universale 2
E un elemento di tipo E Selettori di tipo 1
E[foo] un elemento E con un attributo "foo" Selettori di attributo 2
E[foo="bar"] un elemento E il cui valore di attributo "foo" è esattamente uguale a "bar" Selettori di attributo 2
E[foo~="bar"] un elemento E il cui valore di attributo "foo" è un elenco di valori separati da spazio, uno dei quali è esattamente uguale a "bar" Selettori di attributo 2
E[foo^="bar"] un elemento E il cui valore di attributo "foo" inizia esattamente con la stringa "bar" Selettori di attributo 3
E[foo$="bar"] un elemento E il cui valore di attributo "foo" termina esattamente con la stringa "bar" Selettori di attributo 3
E[foo*="bar"] un elemento E il cui valore di attributo "foo" contiene la sottostringa "bar" Selettori di attributo 3
E[hreflang|="en"] un elemento E il cui attributo "hreflang" ha un elenco di valori separati da trattino che cominciano (da sinistra) con "en" Selettori di attributo 2
E:root un elemento E, radice del documento Pseudo-classi strutturali 3
E:nth-child(n) un elemento E, n-esimo figlio del suo genitore ['n' e 'nth' stanno per "numero", N.d.T.] Pseudo-classi strutturali 3
E:nth-last-child(n) un elemento E, n-esimo figlio del suo genitore, contando a partire dall'ultimo Pseudo-classi strutturali 3
E:nth-of-type(n) un elemento E, n-esimo fratello del suo tipo Pseudo-classi strutturali 3
E:nth-last-of-type(n) un elemento E, n-esimo fratello del suo tipo, contando a partire dall'ultimo Pseudo-classi strutturali 3
E:first-child un elemento E, il primo figlio del suo genitore Pseudo-classi strutturali 2
E:last-child un elemento E, l'ultimo figlio del suo genitore Pseudo-classi strutturali 3
E:first-of-type un elemento E, il primo fratello del suo tipo Pseudo-classi strutturali 3
E:last-of-type un elemento E, l'ultimo fratello del suo tipo Pseudo-classi strutturali 3
E:only-child un elemento E, solo figlio del suo genitore Pseudo-classi strutturali 3
E:only-of-type un elemento E, solo fratello del suo tipo Pseudo-classi strutturali 3
E:empty un elemento E che non ha figli (compresi i nodi di testo) Pseudo-classi strutturali 3
E:link
E:visited
un elemento E che è l'ancora sorgente di un collegamento ipertestuale la cui destinazione non è stata ancora visitata (:link) o è già stata visitata (:visited) Le pseudo-classi dei collegamenti 1
E:active
E:hover
E:focus
un elemento E durante determinate azioni dell0utente Le pseudo-classi dell'azione dell'utente 1 e 2
E:target un elemento E che è la destinazione di un URI di riferimento La pseudo-classe di destinazione 3
E:lang(fr) un elemento di tipo E in lingua "fr" (il linguaggio del documento specifica come viene determinata la lingua) La pseudo-classe :lang() 2
E:enabled
E:disabled
un elemento E dell'interfaccia utente che è abilitato o disabilitato Le pseudo-classi degli stati di elemento UI [UI=User Interface, Interfaccia Utente, N.d.T.] 3
E:checked un elemento E dell'interfaccia utente che viene selezionato (per esempio un bottone radio o una checkbox di un form) Le pseudo-classi degli stati di elemento UI 3
E::first-line la prima riga formattata di un elemento E Lo pseudo-elemento ::first-line 1
E::first-letter la prima lettera formattata di un elemento E Lo pseudo-elemento ::first-letter 1
E::selection la parte di un elemento E che viene selezionata/sottolineata dall'utente Gli pseudo-elementi dei frammenti di elemento UI 3
E::before genera il contenuto prima di un elemento E Lo pseudo-elemento ::before 2
E::after genera il contenuto dopo un elemento E Lo pseudo-elemento ::after 2
E.warning un elemento E la cui classe è "warning" (il linguaggio del documento specifica come la classe è determinata). Selettori di classe 1
E#myid un elemento E con ID uguale a "myid". Selettori diID 1
E:not(s) un elemento E che non corrisponde ad un selettore semplice La pseudo-classe di negazione 3
E F un elemento F discendente di un elemento E Combinatori del discendente 1
E > F un elemento F figlio di un elemento E Combinatori del figlio 2
E + F un elemento F immediatamente preceduto da un elemento E Combinatore del fratello adiacente 2
E ~ F un elemento F preceduto da un elemento E Combinatore del fratello generale 3

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

Esempi CSS:

In questo esempio condensiamo tre regole con dichiarazioni identiche in un'unica regola. 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 }

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.

Esempio:

Il seguente selettore rappresenta un elemento h1 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.

Esempi CSS:

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

La prima regola selezionerà solo gli elementi h1 nel namespace "http://www.example.com".

La seconda regola selezionerà tutti gli elementi nel namespace "http://www.example.com".

La terza regola selezionerà solo gli elementi h1 senza un namespace dichiarato.

La quarta regola selezionerà gli elementi h1 in ogni namespace (inclusi quelli senza un namespace dichiarato).

L'ultima regola è equivalente alla quarta, in quanto non è stato definito un namespace predefinito.

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.

Esempi:

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.

Esempi:

Il seguente selettore di attributo rappresenta un elemento h1 che ha l'attributo title, qualunque sia il valore:

h1[title]

Nel seguente esempio, il selettore rappresenta un elemento span il cui attributo class ha esattamente il valore "example":

span[class="example"]

Selettori di attributo multipli possono essere usati per rappresentare diversi attributi di un elemento, o diverse condizioni dello stesso attributo. Qui il selettore rappresenta un elemento span il cui attributo hello ha esattamente il valore "Cleveland" e il cui attributo goodbye ha esattamente il valore "Columbus":

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

I seguenti selettori illustrano la differenza tra "=" e "~=". Il primo selettore rappresenterà, per esempio, il valore "copyright copyleft copyeditor" su un attributo rel. Il secondo selettore rappresenterà solo un elemento a con un attributo href che ha l'esatto valore "http://www.w3.org/".

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

Il seguente selettore rappresenta un elemento link il cui attributo hreflang è esattamente "fr".

link[hreflang=fr]

Il seguente selettore rappresenta un elemento link per il quale il valore dell'attributo hreflang comincia con "en", inclusi "en", "en-US", e "en-cockney":

link[hreflang|="en"]

Similmente, i seguenti selettori rappresentano un elemento DIALOGUE ogni volta che ha uno dei due diversi valori per l'attributo character:

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.

Esempi:

Il seguente selettore rappresenta un object HTML, riferentesi ad un'immagine:

object[type^="image/"]

Il seguente selettore rappresenta un'ancora HTML a con un attributo href il cui valore finisce con ".html".

a[href$=".html"]

Il seguente selettore rappresenta un paragrafo HTML con l'attributo title il cui valore contiene la sottostringa "hello"

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.

Esempi CSS:

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

La prima regola selezionerà solo gli elementi con l'attributo att nel namespace "http://www.example.com" con il valore "val".

La seconda regola selezionerà solo gli elementi con l'attributo att senza badare al namespace dell'attributo (incluso alcun namespace dichiarato).

Le ultime due regole sono equivalenti e selezioneranno solo gli elementi con l'attributo att dove non si dichiara che l'attributo si trovi in un namespace.

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.

Esempio:

Si consideri un elemento EXAMPLE con un attributo "notation" che ha un 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] { /*... impostazioni predefinite della proprietà ...*/ }
EXAMPLE[notation=octal]   { /*... altre impostazioni...*/ }

la prima regola non selezionerà gli elementi il cui attributo "notation" è impostato in modo predefinito, ossia non impostato esplicitamente. Per comprendere tutti i casi, il selettore di attributo per il valore predefinito deve essere eliminato:

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

Qui, dato che il selettore EXAMPLE[notation=octal] è più specifico rispetto al solo tag, le dichiarazioni di stile nella seconda regola sovrascriveranno quelle nella prima per gli elementi che hanno un valore di attributo "notation" uguale a "octal". Bisogna fare attenzione che tutte le dichiarazioni di proprietà da applicare solo al caso predefinito vengano sovrascritte nelle regole di stile dei casi non predefiniti.

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".)

Esempi CSS:

Possiamo assegnare l'informazione di stile a tutti gli elementi con class~="pastoral" come segue:

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

o semplicemente

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

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

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

Date queste regole, la prima istanza H1 qui di seguito non ha il testo in verde, mentre la seconda si:

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

Esempio CSS:

La seguente regola seleziona ogni elemento P al cui attributo "class" viene assegnato un elenco di valori separati da spazio bianco che comprende "pastoral" e "marine":

p.pastoral.marine { color: green }

Questa regola ha una corrispondenza se class="pastoral blue aqua marine" ma non ha corrispondenza per class="pastoral blue".

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.

Esempi:

Il seguente selettore di ID rappresenta un elemento h1 il cui attributo ID ha il valore di "chapter1":

h1#chapter1

Il seguente selettore di ID rappresenta qualsiasi elemento il cui attributo ID ha il valore "chapter1":

#chapter1

Il seguente selettore rappresenta qualsiasi elemento il cui attributo ID ha il valore "z98y".

*#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:

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.

Esempio:

Il seguente selettore rappresenta il links con classe external e già visitati:

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.

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.

Esempi:

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

Un esempio di combinazione di pseudo-classi dinamiche:

a:focus
a:focus:hover

L'ultimo selettore seleziona gli elementi a che sono nella pseudo-classe :focus e nella pseudo-classe :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.

Esempio:

p.note:target

Questo selettore rappresenta un elemento p di classe note che è l'elemento di destinazione dell'URI di riferimento.

Esempio CSS:

Qui la pseudo-classe :target viene usata per rendere l'elemento di destinazione in rosso e posizionare un'immagine prima di esso, se ce n'è una:

*: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."

Esempi:

I due selettori che seguono rappresentano un documento HTML in belga, francese o tedesco. I due selettori che li seguono rappresentano citazioni q di un elemento arbitrario in belga, francese o tedesco.

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

Gli elementi radio e le caselle di selezione possono essere selezionate dall'utente, ma sono a volte in uno stato indeterminato, né selezionato né deselezionato. Questo può essere dovuto ad un attributo dell'elemento, o alla manipolazione del DOM.

Una futura versione di questa specifica potrà introdurre una pseudo-classe :indeterminate che si applica a tali elementi.

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.

Esempi:

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

Esempi:

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.

Esempi:

I seguenti selettori sono quindi equivalenti:

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.

Esempi:

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.

Esempio:

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

Esempi:

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

Esempi:

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

Esempio CSS:

Questo permette ad un autore di alternare la posizione delle immagini flottate:

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

Esempio:

Per rappresentare tutti i figli h2 di un body XHTML tranne il primo e l'ultimo, si può usare il seguente selettore:

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

In questo caso, si potrebbe anche usare :not(), sebbene il selettore risulti essere appena sufficiente:

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.

Esempi:

Il seguente selettore rappresenta un elemento p, primo figlio di un elemento div:

div > p:first-child

Questo selettore rappresenta p all'interno di un div nel seguente frammento:

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

ma non rappresenta il secondo p nel seguente frammento:

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

I seguenti due selettori sono di solito equivalenti:

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

Esempio:

Il seguente selettore rappresenta una voce di lista li, ultimo figlio di una lista ordinata ol.

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.

Esempio:

Il seguente selettore rappresenta un titolo di definizione dt all'interno di una lista di definizione dl, essendo questo dt il primo del suo tipo nell'elenco dei figli del suo elemento genitore.

dl dt:first-of-type

Si tratta di una valida descrizione per i primi due elementi dt nel seguente esempio, ma non per il terzo:

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

Esempio:

Il seguente selettore rappresenta l'ultima cella di dati td di una riga di tabella.

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.

Esempi:

p:empty è una valida rappresentazione del seguente frammento:

<p></p>

foo:empty non è una valida rappresentazione per i seguenti frammenti:

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

Esempi:

Il seguente selettore seleziona tutti gli elementi button in un documento HTML che non sono disabilitati.

button:not([DISABLED])

Il seguente selettore rappresenta tutti gli elementi eccetto FOO.

*:not(FOO)

Il seguente gruppo di selettori rappresenta tutti gli elementi HTML tranne i link.

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.

Esempi:

Presupponendo che il namespace predefinito sia legato a "http://example.com/", il seguente selettore rappresenta tutti gli elementi che non sono in quel namespace:

*|*:not(*)

Il seguente selettore seleziona tutti gli elementi che hanno l'hover, senza badare al namespace. In particolare, non si limita solo a selezionare gli elementi nel namespace predefinito che non hanno l'hover, e gli elementi che non sono nel namespace predefinito non hanno una corrispondenza con la regola quando hanno l'hover.

*|*: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.

Esempio CSS:

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

La precedente regola significa: "cambia le lettere della prima riga di ogni paragrafo in maiuscolo".

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.

Esempio:

Questo esempio mostra una resa possibile di una lettera iniziale. Si noti che 'line-height', ereditata dallo pseudo-elemento ::first-letter è 1.1, ma il programma utente in questo esempio ha calcolato l'altezza della prima lettera in modo differente, tanto da non causare uno spazio tra le prime due righe. Si noti anche che il tag fittizio di apertura della prima lettera si trova dentro span, e in questo modo il peso del font della prima lettera è normale, non grassetto come span:

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

Immagine che illustra lo pseudo-elemento ::first-letter

Il seguente CSS farà estendere una lettera iniziale su due righe:

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

Questo esempio potrebbe essere formattato come segue:

L'effetto combinato degli pseudo-elementi ::first-letter e ::first-line

La sequenza di tag fittizi è:

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

Si noti che i tag dello pseudo-elemento ::first-letter sono attorno al contenuto (ossia il carattere iniziale), mentre il tag di apertura dello pseudo-elemento ::first-line viene inserito dopo il tag di apertura dell'elemento di blocco.

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]

Le virgolette che precedono la
prima lettera dovrebbero essere incluse.

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

Esempio:

La sequenza di tag fittizi per questo frammento HTML:

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

Esempio:

Dopo la regola 'p::before {content: "Nota: "}', il selettore 'p::first-letter' seleziona la "N" di "Nota".

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

Esempio:

Il seguente esempio illustra come la sovrapposizione di pseudo-elementi interagisca. La prima lettera di ogni elemento P è verde con una dimensione del font di '24pt'. Il resto della prima riga formattata è 'blue' mentre il resto del paragrafo è 'red'.

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>

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

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

Si noti che ::first-letter è all'interno di ::first-line. Le proprietà impostate su ::first-line sono ereditate da ::first-letter, ma vengono sovrascritte se la stessa proprietà è impostata su ::first-letter.

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.

Esempi:

Per esempio, si consideri il seguente selettore:

h1 em

Rappresenta un elemento em discendente di un elemento h1. È una descrizione corretta e valida, ma parziale, del seguente frammento:

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

Il seguente selettore:

div * p

rappresenta un elemento p, nipote o ultimo discendente di un elemento div. Si noti che lo spazio bianco sui due lati di "*" non fa parte del selettore universale; lo spazio bianco è un combinatore che indica che il DIV deve essere l'antenato di un elemento, e che questo elemento deve essere l'antenato di P.

Il seguente selettore, che combina il selettore discendente con i selettori di attributo, rappresenta un elemento che (1) ha l'attributo href impostato e (2) si trova all'interno di p a sua volta all'interno di div:

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.

Esempi:

Il seguente selettore rappresenta un elemento p figlio di body:

body > p

Il seguente esempio combina i combinatori del discendente e i combinatori del figlio.

div ol>li p

Rappresenta un elemento p discendente di un elemento li; l'elemento li deve essere il figlio di un elemento ol; l'elemento ol deve essere discendente di un div. Si noti che lo spazio bianco facoltativo intorno al combinatore ">" combinator è stato tolto.

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.

Esempi:

Il seguente selettore rappresenta un elemento p che segue immediatamente un elemento math:

math + p

Il seguente selettore è concettualmente simile al precedente, tranne per il fatto che aggiunge un selettore di attributo — aggiunge una restrizione all'elemento h1, che deve avere class="opener":

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.

Esempio:

h1 ~ pre

rappresenta un elemento pre che segue un h1. È una descrizione corretta e valida, ma parziale, di:

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

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

Esempi:

*               /* 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]) :

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.

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

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

Profilo dei selettori
Specifica CSS livello 1
Accetta selettori di tipo
selettori di classe
selettori di ID
pseudo-classi :link, :visited e :active
combinatore discendente
pseudo-elementi ::first-line e ::first-letter
Esclude selettore universale
selettore universale
pseudo-classi :hover e :focus
pseudo-classe :target
pseudo-classe :lang()
tutte le pseudo-classi di stati di elemento della UI
tutte le pseudo-classi strutturali
pseudo-classe di negazione
tutti gli pseudo-elementi di frammenti di elemento della UI
pseudo-elementi ::before e ::after
combinatori del figlio
combinatori del fratello
namespace
Restrizioni extra permesso solo un selettore di classe per sequenza di selettori semplici


Profilo dei selettori
Specifica CSS livello 2
Accetta selettori di tipo
selettore universale
selettori di presenza e di valore di attributo
selettori di classe
selettori di ID
pseudo-classi :link, :visited, :active, :hover, :focus, :lang() e :first-child
combinatore del discendente
combinatore del figlio
combinatore del fratello adiacente
pseudo-elementi ::first-line e ::first-letter
pseudo-elementi ::before e ::after
Esclude selettori di contenuto
selettori di attributo che selezionano sottostringhe
pseudo-classe :target
tutte le pseudo-classi di stati di elemento della UI
tutte le pseudo-classi strutturali diverse da :first-child
pseudo-classe di negazione
tutti gli pseudo-elementi dei frammenti di elemento della UI
combinatori del fratello generale
namespace
Restrizioni extra ammessa più di un selettore di classe per sequenza di selettori semplici (restrizione CSS1 )

Nei CSS, i selettori esprimono una corrispondenza a pattern che determina quali regole di stile si applicano agli elementi nell'albero del documento.

Il seguente selettore (CSS livello 2) selezionerà tutte le ancore a con attributo name poste in un'intestazione h1:

h1 a[name]

Tutte le dichiarazioni CSS unite a tale selettore si applicano agli elementi che hanno corrispondenza con esso.

Profilo dei selettori
Specifica STTS 3
Accetta

selettori di tipo
selettore universale
selettori di attributo
selettori di classe
selettori di ID
tutte le pseudo-classi strutturali
tutti i combinatori
namespace

Esclude pseudo-classi non accettate
pseudo-elementi
Restrizioni extra alcuni selettori e combinatori non sono permessi nelle descrizioni di frammento alla destra delle dichiarazioni STTS.

I selettori si usano in STTS 3 in due modi diversi:

  1. un meccanismo di selezione equivalente a quello CSS: le dichiarazioni unite al selettore dato si applicano agli elementi che corrispondono a tale selettore,
  2. le descrizioni di frammento che appaiono alla destra delle dichiarazioni.

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:

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