Attributo di classe HTML


Esempio

Uso dell'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>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>

Altri esempi "Provalo da solo" di seguito.


Definizione e utilizzo

L' classattributo specifica uno o più nomi di classe per un elemento.

L' classattributo viene utilizzato principalmente per puntare a una classe in un foglio di stile. Tuttavia, può anche essere utilizzato da un JavaScript (tramite il DOM HTML) per apportare modifiche agli elementi HTML con una classe specificata.


Supporto browser

Attribute
class Yes Yes Yes Yes Yes

Sintassi

<element class="classname">

Valori di attributo

Value Description
classname Specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.

Naming rules:

  • Must begin with a letter A-Z or a-z
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")

Altri esempi

Esempio

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">Header 1</h1>
<p>A paragraph.</p>

</body>
</html>

Esempio

Utilizzo di JavaScript per aggiungere un colore di sfondo giallo al primo elemento con class="example" (indice 0).

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

Esempio

Utilizzo di JavaScript per aggiungere la classe "mystyle" a un elemento con id="myDIV":

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

Pagine correlate

Esercitazione HTML: attributi HTML

Esercitazione CSS: sintassi CSS

Riferimento CSS: Selettore CSS .class

Riferimento HTML DOM: Metodo HTML DOM getElementsByClassName()

Riferimento HTML DOM: Proprietà HTML DOM className

Riferimento HTML DOM: Proprietà HTML DOM classList

Riferimento HTML DOM: Oggetto stile HTML DOM