Atributo class de HTML

Definición y uso

class El atributo especifica el nombre de la clase del elemento (classname).

class El atributo se utiliza principalmente para apuntar a las clases (class) en las hojas de estilo. Sin embargo, también se puede utilizar para cambiar los elementos HTML con una clase específica utilizando JavaScript (HTML DOM).

Vea también:

Tutoriales de HTML:Atributos HTML

Tutoriales de CSS:Sintaxis CSS

Manual de referencia de CSS:Selector .class CSS

Manual de referencia de HTML DOM:Método getElementsByClassName() de HTML DOM

Manual de referencia de HTML DOM:Propiedad className de HTML DOM

Manual de referencia de HTML DOM:Propiedad classList de HTML DOM

Manual de referencia de HTML DOM:Objeto Style del DOM HTML

Ejemplo

Ejemplo 1

Usar la propiedad class en un documento HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Encabezado 1</h1>
<p>Un párrafo.</p>
<p class="important">Tenga en cuenta, este es un párrafo importante. :)</p>
</body>
</html>

Probar personalmente

Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

<elemento class="classname">

Valor del atributo

Valor Descripción
classname

Asignar una o más clases a un elemento.

Si se deben especificar múltiples clases, las nombres de las clases se pueden separar por espacios.

Esto permite combinar múltiples clases para un elemento HTML.

Por ejemplo:<span class="left important">

Reglas de nombramiento:

  • Debe comenzar con una letra A-Z o a-z.
  • Puede seguir: letras (A-Za-z), números (0-9), guiones (-) y guiones bajos (_).

Más ejemplos

Ejemplo 2

Agregar múltiples 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">Título 1</h1>
<p>Un párrafo.</p>
</body>
</html>

Probar personalmente

Ejemplo 3

Añadir el color de fondo amarillo usando JavaScript al primer elemento con class="example" (índice 0).

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

Probar personalmente

Ejemplo 4

Añadir la clase "mystyle" al elemento con id "myDIV" usando JavaScript:

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

Probar personalmente

Compatibilidad del navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte