Selettore classe di CSS

Nel CSS, i selettori di classe sono visualizzati con un punto:

.center {text-align: center}

Nell'esempio sopra, tutti gli elementi HTML con la classe 'center' sono centrati.

Nel codice HTML riportato di seguito, gli elementi h1 e p hanno la classe 'center'. Questo significa che entrambi seguiranno le regole del selettore ".center".

<h1 class="center">
Questo titolo sarà allineato al centro
</h1>
<p class="center">
Questo paragrafo sarà anche allineato al centro.
</p>

Attenzione:Il primo carattere del nome della classe non può essere un numero! Non funziona in Mozilla o Firefox.

Come per l'id, anche la classe può essere utilizzata come selettore deriva:

.fancy td {
	color: #f60;
	background: #666;
	}

In questo esempio, le celle delle tabelle all'interno degli elementi più grandi con il nome della classe 'fancy' verranno visualizzate con testo arancione su sfondo grigio. (L'elemento più grande con il nome della classe 'fancy' potrebbe essere una tabella o un div)

Gli elementi possono anche essere selezionati in base alle loro classi:}

td.fancy {
	color: #f60;
	background: #666;
	}

Nell'esempio sopra, le celle tabellari con nome classe fancy saranno di colore arancione con sfondo grigio.

<td class="fancy">

Puoi assegnare la classe fancy a qualsiasi elemento tabellare una quantità illimitata di volte. Le celle etichettate con fancy saranno di colore arancione con sfondo grigio. Le celle non assegnate a una classe chiamata fancy non saranno influenzate da questa regola. C'è anche un altro punto da notare, i paragrafi con classe fancy non saranno di colore arancione con sfondo grigio, ovviamente, nessun altro elemento etichettato come fancy sarà influenzato da questa regola. Questo è dovuto al modo in cui abbiamo scritto questa regola, l'effetto è limitato alle celle etichettate come fancy (cioè usando l'elemento td per selezionare la classe fancy).

Contenuti correlati

Se hai bisogno di imparare di più sui selettori di classe, leggi il tutorial avanzato di CodeW3C.com:Dettagli del selettore classe di CSS.