HTML Dando un elemento a una classe


Esempio

Le classi sono identificatori per gli elementi a cui sono assegnati. Usa l'attributo class per assegnare una classe a un elemento.

<div class="example-class"></div>

Per assegnare più classi a un elemento, separa i nomi di classe con spazi.

<div class="class1 class2"></div>

Usando le classi in CSS

Le classi possono essere utilizzate per lo styling di determinati elementi senza modificare tutti gli elementi di quel tipo. Ad esempio, questi due elementi span possono avere uno stile completamente diverso:

<span></span>
<span class="special"></span>

Le classi con lo stesso nome possono essere assegnate a qualsiasi numero di elementi in una pagina e riceveranno tutti lo stile associato a quella classe. Questo sarà sempre vero a meno che non si specifichi l'elemento all'interno del CSS.

Ad esempio, abbiamo due elementi, entrambi con l' highlight della classe:

<div class="highlight">Lorem ipsum</div>
<span class="highlight">Lorem ipsum</span>

Se il nostro CSS è come sotto, allora il colore verde verrà applicato al testo all'interno di entrambi gli elementi:

.highlight { color: green; }

Tuttavia, se vogliamo solo targetizzare div con la classe highlight , possiamo aggiungere specificità come di seguito:

div.highlight { color: green; }

Tuttavia, quando si .highlight styling con CSS, è generalmente consigliabile utilizzare solo classi (ad es. .highlight ) piuttosto che elementi con classi (es. div.highlight ).

Come con qualsiasi altro selettore, le classi possono essere annidate:

.main .highlight { color: red; } /* Descendant combinator */ 
.footer > .highlight { color: blue; } /* Child combinator */ 

Puoi anche concatenare il selettore di classe per selezionare solo elementi che hanno una combinazione di più classi. Ad esempio, se questo è il nostro HTML:

<div class="special left menu">This text will be pink</div>

E vogliamo colorare questo specifico pezzo di testo rosa, possiamo fare quanto segue nel nostro CSS:

.special.left.menu { color: pink; }