Introduzione ai CSS - I selettori
Tuesday 27 November 2007 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
Con questo articolo cercheremo di orientarci un po' nella selva dei selettori CSS.
Prima di procedere con la lettura consiglio di leggere l'articolo Introduzione ai CSS - Le relazioni tra gli elementi per familiarizzare con la terminologia.
I selettori di cui mi occupo in questo articolo sono esclusivamente riferiti alla specifica CSS 2.0.
Selettore di tipo
Un selettore di tipo influenza tutte le istanze di un elemento presenti nell'albero degli elementi del documento. Il selettore è, molto semplicemente, il nome dell'elemento che si desidera influenzare.
h1 { color: red; }p { line-height: 1.5em; }
La prima regola dell'esempio, quindi, influenza tutti i titoli di primo livello (h1) presenti nel documento, indipendentemente dal livello di annidamento. La seconda regola fa la stessa cosa per i paragrafi (p).
Selettore di discendente
Il selettore di discendente influenza un elemento che è il discendente di un altro elemento, indipendentemente dal livello di annidamento. E' formato da due o più selettori separati da uno spazio.
li span { background-color: yellow; }ol li span { background-color: white; }
La prima regola dell'esempio selezionerà tutti gli elementi span che sono discendenti di li, indipendentemente dal fatto che l'elemento li sia annidato in una lista ordinata (ol) o non ordinata (ul).
La seconda regola selezionerà tutti gli elementi span discendenti di li, purché li sia a sua volta discendente di ol. In altre parole la seconda regola colpirà solo gli span nelle liste ordinate.
Selettore universale
Il selettore universale, indicato da un asterisco *, influenza ogni singolo elemento HTML nell'albero degli elementi del documento.
* { color: black; }body * p { color: red; }
La prima regola dell'esempio farà in modo che il colore di primo piano di ogni elemento sia nero.
Quiz!
Quali paragrafi seleziona la seconda regola dell'esempio precedente: body * p { color: red; }? Scrivi la risposta in un commento!
Selettore di figlio
Il selettore di figlio influenza un elemento che è figlio di un altro, ed è formato da due o più selettori separati da una parentesi angolare (>).
body > p { line-height: 1.5; }
La regola precedente influenza tutti i paragrafi che sono figli di body.
IE 7 supporta il selettore. IE 5.0 considera come unico selettore la parte della regola successiva al simbolo >, IE 5.5 e IE 6 non lo supportano.
Selettore di fratello adiacente
Influenza un elemento che segue direttamente un altro elemento nell'albero degli elementi, ed è formato da due o più selettori separati dal simbolo +.
h1 + p { margin-top: 0; }
Questa regola annulla il margine superiore dei paragrafi che seguono immediatamente un titolo di primo livello.
IE 7 supporta il selettore. IE 5.0 considera come unico selettore la parte della regola successiva al simbolo +, IE 5.5 e IE 6 non lo supportano.
Selettori di attributo
I selettori di attributo consentono all'autore di specificare regole che influenzano elementi nei quali sono presenti particolari attributi o valori di attributi.
La regola seguente, per esempio, seleziona tutti i titoli di primo livello che possiedono l'attributo title.
h1[title] { color: blue; }
Un selettore nella forma [attributo="valore"] influenza gli elementi che contengono un dato attributo con esattamente il valore indicato nella regola. La regola seguente, per esempio, seleziona esclusivamente gli elementi div con classe "esempio".
div[class="esempio"] { border: 1px solid red; }
Gli attributi e i valori possono essere multipli, una regola come la seguente è, quindi, valida:
div[class="esempio"][title="selettori"] {background: yellow;}
Questa regola selezionerà tutti gli elementi div con classe "esempio" e title "selettori".
Un selettore di attributo come il seguente: [attributo~="valore"] influenza elementi il cui valore dell'attributo è una lista di parole separata da spazi una delle quali è proprio quella indicata nella regola.
div[class~=evidenziato] { background: yellow; }
Questa regola influenza l'elemento dell'esempio seguente perché nei valori dell'attributo class è presente la parola "evidenziato":
<div class="esempio evidenziato">Testo</div>
Infine un selettore nella forma [attributo|="valore"] influenza elementi il cui valore dell'attributo è una lista di parole separata da trattini d'unione (-) che inizia esattamente con il valore indicato nella regola.
*[lang|="en"] { font-style: italic; }
Questa regola influenza tutti gli elementi il cui valore dell'attributo lang è composto da parole separate da trattini e la prima è en. Per esempio, influenzerà il seguente paragrafo:
<p lang="en-us">A paragraph written in American English</p>
IE 7 supporta i selettori di attributo. Nessuno dei selettori di attributo è supportato da IE 6, e versioni precedenti.
Selettori di classe
Consentono di associare uno stile agli elementi ai quali sono assegnati particolari valori dell'attributo class. Una classe può essere associata ad un numero arbitrario di elementi, anche differenti, all'interno della stessa pagina.
Il selettore di classe è rappresentato da un punto . preceduto, o meno, dall'elemento al quale è associato e seguito dal valore dell'attributo class.
<p class="evidenziato">Testo</p><div class="evidenziato">Testo</div>
Per influenzare gli elementi dell'esempio è possibile utilizzare selettori di classe come i seguenti:
.evidenziato { border: 1px solid red; }div.evidenziato { border: none; background: yellow; }
Inoltre possiamo assegnare nomi di classe multipli a un dato elemento in una lista separata da spazi:
<p class="esempio evidenziato">Un esempio evidenziato</p>
L'elemento precedente può essere influenzato dalla regola seguente:
p.esempio.evidenziato { font-style: italic; }
IE 7 supporta i selettori di classe multipli. I selettori di classe multipli non sono supportati da IE 6, e versioni precedenti.
Selettori di ID
Consentono di associare uno stile agli elementi basandosi sul valore dell'attributo id. L'identificativo è univoco: all'interno della stessa pagina può esserci un solo id con un dato valore.
Il selettore di ID è rappresentato dal simbolo # preceduto, o meno, dall'elemento al quale è associato e seguito dal valore dell'attributo id.
<div id="menu">Testo</div>
Per influenzare l'elemento dell'esempio è possibile utilizzare una regola come la seguente:
#menu { width: 14em; }
Pseudo-classi
La pseudo-classe permette selezioni basate su informazioni che non possono essere espresse utilizzando selettori semplici o che risiedono all'esterno dell'albero degli elementi.
:first-child
:first-child influenza un elemento che è il primo figlio di un altro elemento. La regola seguente, quindi:
#contenuto p:first-child { font-size: 150%; }
Influenzerà solo il primo paragrafo presente nella porzione di codice seguente:
<div id="contenuto"><p>Lorem ipsum dolor sit amet</p><p>Consectetuer adipiscing elit.</p></div>
IE 7 supporta questa pseudo-classe. La pseudo-classe :first-child non è supportata da IE 6 e versioni precedenti ad esclusione di e IE 5.2 per MAC.
:link e :visited
Le pseudo-classi :link e :visited influenzano i collegamenti ipertestuali
a:link {color: #00f;text-decoration: underline;}
a:visited {color: #800080;text-decoration: underline;}
Le pseudo-classi dinamiche :hover, :active e :focus
Queste pseudo-classi controllano la presentazione degli elementi in funzione di azioni eseguite dall'utente.
:hover si applica quando l'utente posiziona il puntatore del dispositivo di puntamento all'interno del box generato dall'elemento.
p:hover { background: #ededed; }
Questa regola cambia lo sfondo dei paragrafi quando l'utente vi posiziona il puntatore. La regola successiva provoca il cambiamento dinamico del colore dei collegamenti:
a:hover {color: #ffa500;text-decoration: underline;}
:active si applica quando l'elemento è attivato dall'utente. Per il mouse ciò equivale all'intervallo di tempo che intercorre tra la pressione del pulsante ed il rilascio.
a:active {color: #f00;background: #fff;text-decoration: underline;}
IE 7 supporta correttamente :hover su tutti gli elementi. Le pseudo-classi :hover e :active sono supportate da IE 6 e versioni precedenti in modo parziale: sono applicate solo ai collegamenti ipertestuali.
:focus si applica quando un elemento è il soggetto dell'interazione dell'utente con il documento (per esempio il campo di un modulo quando inseriamo del testo).
input:focus { background: yellow; }
La pseudo-classe :focus non è supportata da IE 7 e versioni precedenti. IE 5.2 per MAC la supporta.
Ordinamento corretto delle regole per i collegamenti ipertestuali.
Le pseudo-classi utilizzate per i collegamenti ipertestuali dovrebbero essere sempre ordinate nel seguente modo:
a:link { }a:visited { }a:hover { }a:active { }
Se si modifica l'ordinamento consigliato da CSS1 si rischia di impedire la visualizzazione di alcuni degli stati del collegamento (per esempio se :active fosse posto prima di :hover non sarebbe mai visualizzato).
Per approfondire consiglio la lettura di un articolo di Eric Meyer.
:lang
Definisce stili per elementi il cui contenuto è impostato in un dato linguaggio con l'attributo lang di HTML. La regola seguente:
p:lang(en) { font-style: italic; }
influenza paragrafi codificati in lingua inglese (en), come il seguente:
<p lang="en">Text sample</p>
Ecco un esempio di applicazione della pseudo classe per impostare i caratteri utilizzati per le virgolette in lingue differenti.
:lang(en) { quotes: '"' '"' "'" "'"; }:lang(fr) { quotes: "<<" ">>" "<" ">"; }
La pseudo-classe :lang non è supportata da IE 7 e versioni precedenti.
Pseudo elementi
Gli pseudo-elementi creano astrazioni intorno all'albero degli elementi oltre quelle specificate dal linguaggio del documento. Inoltre permettono di riferirsi a contenuto che non è presente nel documento sorgente ma è "generato" dal foglio di stile.
:first-line e :first-letter
Consentono di applicare stili, rispettivamente alla prima riga e alla prima lettera di un elemento:
p:first-letter { font-size: 24px; font-weight: bold; }p:first-line { background: yellow; }
Gli pseudo-elementi :first-line e :first-letter non sono supportati da IE 5.0.
:before e :after
Consentono, insieme alla proprietà content, di generare contenuto non presente nell'albero degli elementi del documento rispettivamente prima o dopo il contenuto dell'elemento.
La seguente regola, per esempio, determinerà la comparsa della stringa "Nota: " prima di tutti i paragrafi con classe "nota":
p.nota:before { content: "Nota: "; }
Oppure potremmo decidere di visualizzare il contenuto dell'attributo alt subito dopo ogni immagine:
img:after { content: attr(alt); }
Gli pseudo-elementi :before e :after non sono supportati da IE 7 e versioni precedenti. Lo stesso vale per la proprietà content.
