CSS - Selettori di elementi

1) Selettore di elementi (type selector)

È il più semplice dei selettori. È costituito da uno qualunque degli elementi di (X)HTML.

Sintassi

body {
background : White;
font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1 {
background: Silver;
color: Black;
}

h3 {
background: olive;
color: white;
}

p {
color : Red;
}

Visualizza l'esempio

2) Raggruppare

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

Il raggruppamento è un'operazione molto conveniente. Proviamo con questo esempio:

body {
background : White;
font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1 {
background : Silver;
}

h1, p {
color : Black;
}

p {
background : teal;
}

3) Selettore universale

Serve a selezionare tutti gli elementi di un documento. Si esprime con il carattere * (asterisco).

Sintassi

* { color: black; }

Esempio

4) Selettore del discendente (descendant selector)

Serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento specificato nella regola. Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello.

Sintassi

body {
background : White;
font : 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

div p{
background : red;
color : white;
}

p {
background : silver;
color : black;
}

p strong {
color : blue;
}

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

Esempio