Atributo class de HTML
El atributo class define uno o más nombres de clase para un elemento. También puede usarse con JavaScript para modificar elementos HTML.
El atributo class de HTML asigna uno o más nombres de clase a un elemento. Esos nombres son el enlace principal que CSS y JavaScript utilizan para encontrar el elemento, aplicarle estilos o modificarlo.
Por qué usar el atributo class
La razón por la que las clases son importantes es la separación de responsabilidades. El HTML describe la estructura de la página, mientras que los estilos residen en una hoja de estilos. El atributo class es el vínculo entre ambos, y ese vínculo tiene dos propiedades importantes:
- Reutilizable. La misma clase puede aplicarse a tantos elementos como se desee — un
<h2>, un<p>y un<button>pueden compartirclass="highlight"y recoger la misma regla. Escribe el estilo una vez, aplícalo en cualquier parte. - Un identificador de selección. Una clase es una etiqueta sobre la que puedes seleccionar. En CSS se selecciona con un punto (
.highlight); en JavaScript se encuentra o modifica a través del DOM. Sin clases habría que aplicar estilos en línea a cada elemento y repetirse constantemente.
En HTML5, el atributo class es un atributo global, por lo que puede usarse en cualquier elemento.
class vs. id
Tanto class como el atributo id etiquetan elementos para poder seleccionarlos, pero responden a preguntas distintas:
- Un
iddebe ser único en el documento — exactamente un elemento lleva un id determinado. Úsalo cuando te refieres a ese elemento específico (un gancho de JavaScript, un destino de ancla en la página). - Una
classes reutilizable — cualquier número de elementos puede compartirla, y un elemento puede llevar varias clases. Úsala siempre que un estilo o comportamiento aplique a un grupo de elementos.
En el trabajo de estilizado del día a día, class es la que más conviene la mayor parte del tiempo, porque el diseño se construye a partir de patrones repetidos y compartidos.
Nombres de clase válidos
El nombre debe comenzar con una letra (a–z o A–Z), un guion (-) o un guion bajo (_), y puede contener luego letras, dígitos (0–9), guiones y guiones bajos. Los nombres de clase distinguen mayúsculas de minúsculas, por lo que card y Card son clases distintas. Lo mejor es nombrar las clases según el propósito del elemento, no su apariencia — intro envejece mejor que 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 -->La última línea es una sorpresa habitual: un espacio dentro del valor del atributo no crea un nombre único con espacio — separa el valor en varios nombres de clase.
Sintaxis
<tag class="classname"></tag>Ejemplo del atributo class de 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>En CSS, para seleccionar todos los elementos con una clase específica, escribe un punto (.) seguido del nombre de la clase. Consulta Selectores CSS para ver el conjunto completo de formas de seleccionar elementos.
Ejemplo del atributo class de HTML usado 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>También puedes manipular el atributo class desde JavaScript a través de la propiedad classList del elemento. Sus tres métodos más utilizados son:
classList.add('name')— añade una clase (no hace nada si ya está presente).classList.remove('name')— elimina una clase.classList.toggle('name')— añade la clase si está ausente, la elimina si está presente. Ideal para estados activo/inactivo como "active" u "open".
Ejemplo del atributo class de HTML usado 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>Los elementos HTML también pueden tener más de un nombre de clase. Cada uno de ellos debe estar separado por un espacio.
Ejemplo del atributo class de HTML con varios nombres de clase
<!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>Etiquetas distintas, como <h2> y <p>, pueden tener el mismo nombre de clase y el mismo estilo.
Ejemplo del atributo class de HTML con los elementos <h2> y <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 sobre accesibilidad
Los nombres de clase no transmiten ningún significado a los lectores de pantalla ni a otras tecnologías de asistencia — existen únicamente para aplicar estilos y ejecutar scripts. Un class="button" en un <div> no se anuncia como un botón. Por tanto, una clase nunca es un sustituto de elegir el elemento semántico correcto (usa un <button> real) ni de añadir ARIA donde sea necesario. Usa clases para dar estilo; usa la semántica para transmitir significado.
En HTML 4.01, el atributo class no estaba permitido en un puñado de elementos del nivel head (como <head>, <html>, <base>, <meta>, <script>, <style> y <title>). Esta restricción es histórica: en HTML5, class es un atributo global permitido en cualquier elemento, por lo que ya no es necesario preocuparse por ello.