id e class in CSS
Usa il selettore ID di CSS per identificare un singolo elemento HTML a cui vuoi applicare uno stile. Per più elementi usa il selettore di classe. Guarda gli esempi.
Nel capitolo precedente abbiamo imparato a conoscere i selettori. Ora parleremo dei selettori id e class, che vengono usati spesso per applicare stili agli elementi di una pagina web.
Selettore id in CSS
Un selettore ID è un identificatore univoco dell'elemento HTML a cui deve essere applicato un determinato stile. Si usa solo quando un singolo elemento HTML della pagina web deve avere uno stile specifico.
Sia nei fogli di stile interni che in quelli esterni, usiamo un cancelletto (#) per il selettore id.
Esempio di un selettore ID:
Selettore ID CSS per un elemento HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Come puoi vedere, abbiamo assegnato blue come selettore id del secondo paragrafo (id="blue") e ne abbiamo dichiarato lo stile usando la proprietà color — #blue {color: #1c87c9;} nella sezione <head>. Ciò significa che l'elemento HTML con il selettore id blue verrà visualizzato in #1c87c9.
Prova questo codice nel nostro editor HTML online per verificare che il colore del secondo paragrafo sia #1c87c9.
Selettore class in CSS
Un selettore di classe si usa quando lo stesso stile deve essere applicato a più elementi HTML nella stessa pagina web.
Sia nei fogli di stile interni che in quelli esterni, usiamo un punto (.) per il selettore di classe.
Esempio di un selettore di classe:
Esempio di selettore di classe CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Nel nostro esempio, un selettore di classe viene usato due volte, nel titolo e nel paragrafo.
Come puoi vedere, abbiamo assegnato blue come selettore di classe (class="blue") e ne abbiamo dichiarato lo stile usando la proprietà color — .blue {color: #1c87c9;} nella sezione <head>. Ciò significa che gli elementi che hanno il selettore di classe blue verranno visualizzati in #1c87c9.
Nel nostro esempio, il titolo e il terzo paragrafo sono #1c87c9. Verificalo nel nostro editor HTML online.
La differenza tra ID e class
La differenza tra ID e classi è che il primo è univoco, mentre la seconda non lo è. Ciò significa che ogni elemento può avere un solo ID e ogni pagina può avere un solo elemento con quell'ID. Se usi lo stesso ID su più elementi, il codice non supererà la validazione. Ma dato che le classi non sono univoche, la stessa classe può essere usata su più elementi e, viceversa, puoi usare più classi sullo stesso elemento.