Atributo de clase HTML


Ejemplo

Uso del atributo class en 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>

Más ejemplos de "Pruébelo usted mismo" a continuación.


Definición y uso

El classatributo especifica uno o más nombres de clase para un elemento.

El classatributo se usa principalmente para apuntar a una clase en una hoja de estilo. Sin embargo, también puede ser utilizado por JavaScript (a través de HTML DOM) para realizar cambios en los elementos HTML con una clase específica.


Compatibilidad con navegador

Attribute
class Yes Yes Yes Yes Yes

Sintaxis

<element class="classname">

Valores de atributo

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 ("_")

Más ejemplos

Ejemplo

Agregue varias clases 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>

Ejemplo

Usando JavaScript para agregar un color de fondo amarillo al primer elemento con class="example" (índice 0).

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

Ejemplo

Usando JavaScript para agregar la clase "mystyle" a un elemento con id="myDIV":

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

páginas relacionadas

Tutorial HTML: Atributos HTML

Tutorial CSS: Sintaxis CSS

Referencia CSS: CSS .class Selector

Referencia de HTML DOM: Método HTML DOM getElementsByClassName()

Referencia HTML DOM: propiedad HTML DOM className

Referencia HTML DOM: Propiedad classList de HTML DOM

Referencia HTML DOM: objeto de estilo HTML DOM