Attributo class HTML

Definizione e uso

class L'attributo specifica il nome della classe dell'elemento (classname).

class L'attributo principale viene utilizzato principalmente per puntare a classi di fogli di stile. Tuttavia, può anche essere utilizzato per modificare gli elementi HTML con classi specifiche tramite JavaScript (HTML DOM).

Vedi anche:

Tutorial HTML:Proprietà HTML

Tutorial CSS:Sintassi CSS

Manuale di riferimento CSS:Selettore .class di CSS

Manuale di riferimento HTML DOM:Metodo HTML DOM getElementsByClassName()

Manuale di riferimento HTML DOM:Proprietà HTML DOM className

Manuale di riferimento HTML DOM:Proprietà HTML DOM classList

Manuale di riferimento HTML DOM:Oggetto Style del DOM HTML

Esempio

Esempio 1

Usa l'attributo class in un documento HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>Un paragrafo.</p>
<p class="important">Attenzione, questo è un paragrafo importante.:)</p>
</body>
</html>

Prova tu stesso

Più esempi sono disponibili nella parte inferiore della pagina.

Sintassi

<element class="classname">

Valore dell'attributo

Valore Descrizione
classname

Assegna una o più classi a un elemento.

Se si desidera specificare più classi, si possono separare i nomi delle classi con uno spazio.

Questo ti permette di combinare più classi per un elemento HTML.

Ad esempio: <span class="left important">

Regole di nomi:

  • Deve iniziare con una lettera A-Z o a-z.
  • può essere seguito da: lettere (A-Za-z), numeri (0-9), trattini ("-") e trattini bassi ("_").

Altri esempi

Esempio 2

Aggiungi più classi a un elemento HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Titolo 1</h1>
<p>Un paragrafo.</p>
</body>
</html>

Prova tu stesso

Esempio 3

Aggiungi lo sfondo giallo utilizzando JavaScript al primo elemento con class="example" (indice 0).

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Prova tu stesso

Esempio 4

Aggiungi la classe "mystyle" all'elemento con id "myDIV" utilizzando JavaScript:

document.getElementById("myDIV").classList.add("mystyle");

Prova tu stesso

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto