I selettori | Guida CSS

I=20 selettori

La parte preponderante della specifica CSS2 =E8 dedicata=20 all'analisi delle diverse propriet=E0 in grado di definire = l'aspetto=20 visuale di elementi e sezioni di una pagina. Prima di tutto, = per=F2, =E8=20 fondamentale capire come e a cosa queste propriet=E0 possono = essere=20 assegnate. L'argomento sar=E0 l'oggetto delle prossime = quattro=20 lezioni.

Fondamentalmente una regola CSS viene applicata ad un=20 selettore. La parola parla da s=E9: si tratta di una = semplice=20 dichiarazione che serve a selezionare la parte o le = parti di=20 un documento soggette ad una specifica regola. Quella che = segue =E8=20 una lista commentata dei vari tipi di selettore. Per = verificare i=20 concetti abbiamo preparato per ciascun tipo un documento di = esempio=20 con codice e ulteriori spiegazioni.

Selettore di elementi (type selector)

=C8 il pi=F9 semplice dei selettori. =C8 costituito da = uno qualunque=20 degli elementi di (X)HTML.

Sintassi

h1 {color: #000000;}
p {background: = white; font:=20 12px Verdana, Arial, sans-serif;}
table {width: = 200px;}

Esempio

Raggruppare

=C8 possibile nei CSS raggruppare diversi elementi al = fine di=20 semplificare il codice. Gli elementi raggruppati vanno = separati da=20 una virgola.

Il raggruppamento =E8 un'operazione molto conveniente. = Pensate a=20 questo scenario:

h1 {background: white;}
h2 {background: = white;}
h3 {background: white;}

Tutti e tre gli elementi hanno uno sfondo bianco. Invece = di=20 scrivere tre regole separate si pu=F2 fare cos=EC:

h1, h2, h3 {background: white;}

Ulteriori esempi e commenti in questa pagina.

Selettore universale (universal selector)

Anche nei CSS abbiamo un jolly. Il selettore universale = serve a=20 selezionare tutti gli elementi di un documento. Si esprime = con il=20 carattere * (asterisco).

Sintassi

* { color: black; }

Esempio

Selettore del discendente (descendant selector)

Nella specifica CSS1 questo tipo era definito "selettore=20 contestuale". Serve a selezionare tutti gli elementi che = nella=20 struttura ad albero di un documento siano discendenti = di un=20 altro elemento specificato nella regola. Ricordiamo che un = elemento=20 =E8 discendente di un altro se =E8 contenuto al suo interno, = a qualsiasi=20 livello.

Sintassi

div p {color: black;}
p strong {color: = red;}

Alcune considerazioni importanti di cui tenere conto. Il=20 selettore va letto per chiarezza da destra a = sinistra. Nel=20 primo esempio verranno selezionati tutti i paragrafi = (P)=20 discendenti di elementi DIV. Nel secondo tutti gli = elementi=20 STRONG che si trovino all'interno di un paragrafo. =

Fate attenzione alla struttura del documento ed evitate = possibili=20 incongruenze. Esistono regole ben precise sull'annidamento = degli=20 elementi che vanno rispettate sia in (X)HTML che nei CSS. Un = paragrafo, per esempio, non pu=F2 contenere un div, cos=EC = come un=20 elemento inline non pu=F2 contenere elementi blocco. Utili = chiarimenti=20 sull'argomento nella lezione Il corpo del=20 documento della Guida a XHTML.

Esempio

Selettore del figlio (child selector)

Seleziona un elemento che sia figlio diretto di un altro. =

Il child selector =E8 solo in apparenza simile al = descendant=20 selector. La differenza sta nella relazione di discendenza = tra gli=20 elementi, che in questo caso deve essere di primo livello. = Chiariamo=20 con un esempio utile anche per comprendere meglio il = significato di=20 descendant selector:

<body>
<p>Primo=20 paragrafo</p>
<div>
<p>Secondo=20 paragrafo</p>
</div>
<p>Terzo=20 paragrafo</p>
</body>

Dei tre paragrafi solo il primo e il terzo sono figli = diretti di=20 body. Il secondo =E8 invece figlio diretto di un elemento = div. Tutti e=20 tre, per=F2, sono discendenti di body. L'immagine chiarisce=20 ulteriormente il concetto. Tra body e il primo e il terzo = paragrafo=20 si scende di un livello. Rispetto al secondo di due = livelli:

3D"Figura

Sintassi

body > p {color: black;}

Come si vede, un'ulteriore differenza sta nella sintassi. = Per il=20 child selector i due elementi devono essere separati = dall'operatore=20 "maggiore di" >. Anche in questo caso la lettura = logica va=20 fatta da destra a sinistra. Nell'esempio si selezionano = tutti i=20 paragrafi figli diretti dell'elemento body.

Questo selettore non =E8 supportato da Explorer su = Windows, cosa=20 che ne limita notevolmente l'utilizzo. Potete verificare il = supporto=20 negli altri browser in questo documento di esempio.

Selettore dell'elemento adiacente (adjacent-sibling=20 selector)

Un altro tipo di selettore introdotto con CSS2 =E8=20 l'adjacent-sibling selector. Seleziona gli elementi = che nel=20 codice del documento siano immediatamente vicini = (adiacenti)=20 ad un altro.

Sintassi

Anche qui partiamo da un esempio:

<h1>Titolo</h1>
<p>Primo=20 paragrafo</p>
<p>Secondo = paragrafo</p>

Il primo paragrafo =E8 adiacente al titolo h1, il secondo = no e=20 pertanto ad esso non potr=E0 applicarsi questa regola:

h1 + p {color: red;}

In base a questa dichiarazione solo il primo dei due = paragrafi=20 avr=E0 il testo rosso.

Il segno di assegnazione della relazione =E8 per questo = selettore=20 +. L'adjacent-sibling selector non =E8 supportato da = Explorer=20 Windows. Anche per questo tipo una pagina di esempio con ulteriori = commenti.

Selettore dell'attributo (attribute selector)

Seleziona gli elementi in base ai loro attributi e/o al = valore di=20 tali attributi. Il supporto di questo selettore non =E8 = diffuso. Il=20 suo uso =E8 per=F2 ricco di implicazioni positive = consentendo una grande=20 flessibilit=E0 nella selezione. L'utilit=E0 sar=E0 ancora = maggiore in=20 linguaggi come XML.

Sintassi

Quattro sono i modi d'uso possibili.

Attributo semplice

elemento [ attributo ]

Con questa sintassi si selezionano tutti gli elementi che = presentino nel codice un determinato attributo.

La dichiarazione:

input [ id ] {background: red;}

applicher=E0 uno sfondo rosso a tutti gli elementi = input per=20 cui sia stato impostato un attributo id, a = prescindere dal=20 valore ad esso assegnato.

Attributo con valore

elemento [ attributo =3D "valore" ]

Seleziona gli elementi che abbiano come valore = dell'attributo la=20 stringa definita nella regola. Pertanto:

input [ id =3D "text" ] { backgorund: red; = }

applicher=E0 un sfondo rosso a tutti gli elementi = input che=20 abbiano come valore dell'attributo id "text". Come si = vede=20 una sintassi pi=F9 restrittiva rispetto alla prima.

Attributo il cui valore contiene una stringa

elemento [ attributo t=3D "valore" ]

In questo caso vengono selezionati tutti gli elementi in = cui il=20 valore dell'attributo dichiarato contenga la stringa = definita=20 nella regola.

img [ alt t=3D "foto" ] {margin: = 10px;}

La regola applicher=E0 un margine di 10px a tutte le = immagini in=20 cui l'attributo alt contiene "foto". Quindi, saranno=20 selezionate sia questa immagine:

sia questa:

Attributo il cui valore inizia con una stringa

elemento [ attributo |=3D "valore" ]

Seleziona gli elementi in cui il valore dell'attributo = dichiarato=20 inizia con la stringa definita nella regola. = Esempio:

img [ alt |=3D "figura" ] {margin: = 10px;}

selezioner=E0 tutte le immagini in cui l'attributo = alt=20 inizia con la stringa "figura".

Links

Se non volete perdervi tra i selettori CSS2 e sapere = tutto sul=20 supporto di classi, pseudo-classi e pseudo-elementi, avete a = disposizione un'ottima risorsa:

CSS2 Selectors Support Chart. Mancano = Mozilla ed=20 Explorer 6, ma =E8 un ottimo punto di partenza per sapere = quali=20 browser supportano determinati costrutti o selettori.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =