Dettagli del selettore classe di CSS

Il selettore di classe permette di specificare uno stile in modo indipendente dagli elementi del documento.

Selettore classe di CSS

Il selettore di classe permette di specificare uno stile in modo indipendente dagli elementi del documento.

Questo selettore può essere utilizzato singolarmente o combinato con altri elementi.

Suggerimento:È possibile utilizzare questi selettori solo dopo aver etichettato correttamente il documento, quindi utilizzare questi due selettori richiede spesso un po' di pianificazione e progettazione.

Il metodo più comune per applicare uno stile senza considerare l'elemento di design specifico è utilizzare il selettore di classe.

Modifica del codice HTML

Prima di utilizzare il selettore di classe, è necessario modificare i segni di markup specifici del documento per garantire che il selettore di classe funzioni correttamente.

Per associare lo stile del selettore di classe all'elemento, è necessario specificare un valore appropriato per la classe. Ecco l'esempio di codice HTML seguente:

<h1 class="important">
Questo titolo è molto importante.
</h1>
<p class="important">
Questo paragrafo è molto importante.
</p>

Nel codice sopra, la classe di entrambi gli elementi è specificata come important: il primo titolo (elemento h1), il secondo paragrafo (elemento p).

Sintassi

Poi applichiamo uno stile a questi elementi classificati utilizzando la seguente sintassi, ovvero un punto (.) davanti al nome della classe, combinato con il selettore di wildcard:

*.important {color:red;}

Se si desidera selezionare tutti gli elementi con lo stesso nome di classe, è possibile ignorare il selettore di wildcard nella scelta di classe, il che non ha alcun effetto negativo:

.important {color:red;}

Prova da solo

Combinazione con selettore di elemento

I selettori di classe possono essere combinati con i selettori di elemento.

Ad esempio, potresti voler che solo i paragrafi siano visualizzati come testo rosso:

p.important {color:red;}

Il selettore corrente abbinerà tutti gli elementi p con l'attributo class che contiene "important", ma non abbinerà altri tipi di elementi, indipendentemente dal fatto che abbiano questo attributo class. Il selettore p.important può essere interpretato come: "Tutti gli elementi p con l'attributo class che ha il valore "important"". Poiché l'elemento h1 non è un paragrafo, il selettore di questa regola non gli corrisponde, quindi l'elemento h1 non diventerà testo rosso.

Se davvero si desidera assegnare uno stile diverso agli elementi h1, è possibile utilizzare il selettore h1.important:

p.important {color:red;}
h1.important {color:blue;}

Prova da solo

Selettore multi-classe CSS

Nella sezione precedente, abbiamo trattato il caso in cui il valore di class contenga una parola. In HTML, un valore di class può contenere una lista di parole, separate da spazi. Ad esempio, se si desidera contrassegnare un elemento specifico come importante (important) e avviso (warning), si può scrivere:

<p class="important warning">
Questo paragrafo è una avvertenza molto importante.
</p>

L'ordine di queste parole non è importante, può essere scritto anche come warning important.

Supponiamo che tutti gli elementi con la classe class "important" siano in grassetto, mentre tutti gli elementi con la classe class "warning" siano in corsivo, e tutti gli elementi che contengono sia "important" che "warning" abbiano anche uno sfondo d'argento. Può essere scritto come:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Prova da solo

Attraverso la connessione di due selettori di classe, è possibile selezionare soloContiene contemporaneamente queste classidegli elementi (l'ordine dei nomi delle classi non è importante).

Se un selettore multi-classe contiene un nome di classe che non è nella lista delle classi, la corrispondenza fallirà. Vedi le regole seguenti:

.important.urgent {background:silver;}

Non sorprende che questo selettore matchi solo gli elementi p che contengono le parole important e urgent nell'attributo class. Pertanto, se un elemento p ha solo le parole important e warning nell'attributo class, non corrisponderà. Tuttavia, può corrispondere agli elementi seguenti:

<p class="important urgent warning">
Questo paragrafo è una avvertenza molto importante e urgente.
</p>

Prova da solo

Punti importanti:Prima di IE7, le versioni di Internet Explorer di diverse piattaforme non possono gestire correttamente i selettori multipli.