CSS Selettori del nome di classe


Esempio

Il selettore del nome della classe seleziona tutti gli elementi con il nome della classe mirata. Ad esempio, il nome della classe .warning selezionerebbe il seguente elemento <div> :

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

Puoi anche combinare i nomi delle classi con gli elementi target in modo più specifico. Costruiamo sull'esempio sopra per mostrare una selezione di classi più complicata.

CSS

.important {
    color: orange;
}
.warning {
    color: blue;
}
.warning.important {
    color: red;
}

HTML

<div class="warning">
    <p>This would be some warning copy.</p>
</div>

<div class="important warning">
    <p class="important">This is some really important warning copy.</p>
</div>

In questo esempio, tutti gli elementi con la classe .warning avranno un colore di testo blu, gli elementi con la classe .important avranno un colore di testo arancione e tutti gli elementi che hanno sia il nome di classe .important che .warning avranno un testo rosso colore.

Si noti che all'interno del CSS, la dichiarazione .warning.important non ha spazi tra i due nomi di classe. Ciò significa che troverà solo elementi che contengono sia i nomi di classe che warning e important nel loro attributo di class . Quei nomi di classe potrebbero essere in qualsiasi ordine sull'elemento.

Se fosse incluso uno spazio tra le due classi nella dichiarazione CSS, selezionerebbe solo elementi che hanno elementi parent con un .warning classe .warning ed elementi figlio con nomi di classe .important .