Attributo class HTML
L'attributo class assegna uno o più nomi di classe a un elemento. Può essere usato anche da JavaScript per modificare gli elementi HTML.
L'attributo HTML class assegna uno o più nomi di classe a un elemento. Quei nomi sono il principale aggancio che CSS e JavaScript utilizzano per trovare l'elemento, stilizzarlo o modificarlo.
Perché usare l'attributo class
Il motivo per cui le classi sono importanti è la separazione delle responsabilità. L'HTML descrive la struttura della pagina, mentre la stilizzazione vive in un foglio di stile. L'attributo class è il collegamento tra i due, e quel collegamento ha due proprietà importanti:
- Riutilizzabile. La stessa classe può essere applicata a quanti elementi si desidera — un
<h2>, un<p>e un<button>possono condividere tutticlass="highlight"e acquisire la stessa regola. Scrivi lo stile una volta, applicalo ovunque. - Un riferimento di selezione. Una classe è un'etichetta su cui puoi fare una selezione. In CSS la selezioni con un punto (
.highlight); in JavaScript la trovi o la modifichi attraverso il DOM. Senza le classi dovresti stilizzare ogni elemento in linea e ripeterti costantemente.
In HTML5, l'attributo class è un attributo globale, quindi puoi usarlo su qualsiasi elemento.
class vs. id
Sia class che l'attributo id etichettano gli elementi per poterli selezionare come target, ma rispondono a domande diverse:
- Un
iddeve essere univoco nel documento — esattamente un elemento porta un dato id. Usalo quando intendi questo specifico elemento (un aggancio JavaScript, un'ancora di navigazione nella pagina). - Una
classè riutilizzabile — un numero qualsiasi di elementi può condividerla, e un elemento può portare più classi. Usala ogni volta che uno stile o un comportamento si applica a un gruppo di elementi.
Nella stilizzazione quotidiana, class è quella che si utilizza la maggior parte delle volte, perché il design è costruito da pattern ripetuti e condivisi.
Nomi di classe validi
Il nome dovrebbe iniziare con una lettera (a–z o A–Z), un trattino (-) o un trattino basso (_), e può poi contenere lettere, cifre (0–9), trattini e trattini bassi. I nomi di classe sono case sensitive, quindi card e Card sono classi diverse. È buona pratica nominare le classi in base allo scopo dell'elemento, non al suo aspetto — intro invecchia meglio di big-red.
<!-- Valid -->
<div class="my-card"></div>
<div class="_intro card2"></div>
<!-- Invalid -->
<div class="1card"></div> <!-- cannot start with a digit -->
<div class="my card"></div> <!-- a space here means TWO classes, not one -->L'ultima riga è una sorpresa comune: uno spazio all'interno del valore dell'attributo non crea un singolo nome con uno spazio — separa il valore in più nomi di classe.
Sintassi
<tag class="classname"></tag>Esempio dell'attributo class HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
</head>
<body>
<h1>Example of the HTML class attribute</h1>
<p class="red">It is some red paragraph.</p>
<p>This is a some text.</p>
<p class="orange">It is some orange paragraph.</p>
</body>
</html>In CSS, per selezionare ogni elemento con una classe specifica, scrivi un punto (.) seguito dal nome della classe. Consulta CSS Selectors per l'insieme completo dei modi per selezionare gli elementi come target.
Esempio dell'attributo class HTML usato con CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #1c87c9;
color: #ffffff;
padding: 20px;
}
</style>
</head>
<body>
<h1>Example of the class attribute</h1>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<h2 class="title">Heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Puoi anche manipolare l'attributo class da JavaScript attraverso la proprietà classList dell'elemento. I suoi tre metodi più utilizzati sono:
classList.add('name')— aggiunge una classe (non fa nulla se è già presente).classList.remove('name')— rimuove una classe.classList.toggle('name')— aggiunge la classe se è assente, la rimuove se è presente. Ideale per stati on/off come "active" o "open".
Esempio dell'attributo class HTML usato con JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="demo">Click a button to change this paragraph's class.</p>
<button onclick="document.getElementById('demo').classList.add('highlight')">Add</button>
<button onclick="document.getElementById('demo').classList.remove('highlight')">Remove</button>
<button onclick="document.getElementById('demo').classList.toggle('highlight')">Toggle</button>
</body>
</html>Gli elementi HTML possono avere anche più di un nome di classe. Ognuno di essi deve essere separato da uno spazio.
Esempio dell'attributo class HTML con più nomi di classe
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.title {
background-color: #202131;
color: #dddddd;
padding: 15px 25px;
}
.text-right {
text-align: right;
}
</style>
</head>
<body>
<h1>Example of multiple classes</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">London</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title text-right">Paris</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<h2 class="title">Tokyo</h2>
</body>
</html>Tag diversi, come <h2> e <p>, possono avere lo stesso nome di classe e lo stesso stile.
Esempio dell'attributo class HTML con gli elementi <h2> e <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grey-text {
color: #808080;
}
</style>
</head>
<body>
<h1>Example of the class attribute </h1>
<h2 class="grey-text">Heading</h2>
<p class="grey-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Nota sull'accessibilità
I nomi di classe non hanno alcun significato per gli screen reader o altre tecnologie assistive — esistono esclusivamente per la stilizzazione e lo scripting. Un class="button" su un <div> non viene annunciato come un pulsante. Quindi una classe non sostituisce mai la scelta dell'elemento semantico corretto (usa un vero <button>) o l'aggiunta di ARIA dove è necessario. Usa le classi per stilizzare; usa la semantica per trasmettere il significato.
In HTML 4.01 l'attributo class era vietato su alcuni elementi a livello di head (come <head>, <html>, <base>, <meta>, <script>, <style> e <title>). Questa restrizione è di natura storica: in HTML5 class è un attributo globale consentito su ogni elemento, quindi non è più necessario preoccuparsene.