Classi di elementi in CSS

Nelle lezioni precedenti abbiamo selezionato gli elementi della pagina per nome del tag, applicando stili, ad esempio, a tutti i paragrafi contemporaneamente. Su una pagina, però, possono esserci paragrafi di tipo diverso, ai quali è necessario applicare stili diversi. Per risolvere questo problema, possiamo assegnare paragrafi diversi a diverse classi CSS.

Per assegnare un tag a una classe, è necessario scrivere per quel tag l'attributo class, e in esso - un nome di classe da voi scelto, composto da lettere, numeri, caratteri di sottolineatura e trattini.

Vediamo un esempio. Creiamo paragrafi con due tipi di classi - eee e zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Ora selezioniamo in CSS i paragrafi con le diverse classi e assegniamo loro alcuni stili. Ad esempio, coloriamo i paragrafi con la classe zzz in rosso, e i paragrafi con la classe eee in verde.

Per fare ciò, nel file CSS dobbiamo selezionare le nostre classi. La selezione ha la seguente sintassi: prima viene il punto, e poi il nome della classe da noi scelto. Cioè per selezionare la classe eee dobbiamo scrivere .eee, e per la classe zzz - scrivere .zzz.

Quindi, realizziamo quanto descritto. Aggiungiamo al nostro HTML anche gli stili CSS per le classi da noi introdotte:

.eee {
	color: green;
}
.zzz {
	color: red;
}

Se eseguiamo il nostro codice, il risultato sarà il seguente:

È dato il seguente codice:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Colorate in rosso gli elementi con la classe odd e in verde - gli elementi con la classe eve.

È dato il seguente codice:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Colorate in rosso tutti gli elementi con la classe eee.

Spiegate perché nel problema precedente i tag li si colorano di rosso, sebbene la classe che imposta il colore sia assegnata al tag ul.