Atributo CLASS

El atributo class se utiliza para agregar clases CSS a los elementos HTML. Las clases permiten aplicar los mismos estilos CSS o comportamiento de JavaScript a diferentes elementos de la página.

Puedes asignar una o más clases a un elemento, separándolas con espacios.

<!-- Una solo clase -->
<div class="container">
  <!-- ... -->
</div>

<!-- Varias clases -->
<div class="container special-box">
  <!-- ... -->
</div>

Cómo Funciona

Para que el atributo class funcione, no solo debes especificar el nombre de clase correcto, sino también agregarlo al archivo CSS o dentro de la etiqueta <style>.

Vincular una clase

<span class="highlighted-text">Este texto será resaltado.</span>

Y configurarla en CSS:

.highlighted-text { 
background-color: yellow; 
font-size: 18px; 
}

En este ejemplo, el texto dentro del elemento <span> con la clase highlighted-text tendrá un fondo amarillo y un tamaño de fuente de 18px.

Este texto será resaltado.

Uso del Atributo class en JavaScript

También podemos trabajar con clases a través de JavaScript. Por ejemplo, podemos buscar todos los elementos con la clase que_se_puede_cliclear y agregar un controlador de eventos que muestre un mensaje cuando se haga clic en el elemento.

const elementos = document.querySelectorAll('.que_se_puede_cliclear');

elementos.forEach(elemento => {
  elemento.addEventListener('click', () => {
    alert('¡Clic!');
  });
});

Ahora, cuando el usuario hace clic en cualquiera de los elementos con la clase que_se_puede_cliclear, aparece una ventana emergente con el mensaje “¡Clic!”.

Selectores Complejos en CSS

En algunos casos, es posible que necesitemos aplicar una clase solo a una etiqueta HTML específica, ignorando todas las demás. Por ejemplo, así:

/* Solo para elementos `<p>` con la clase `texto-especial` */
p.texto-especial {
  color: blue;
}

Entonces, el primer texto en este caso será azul, mientras que el segundo permanecerá igual.

<p class="texto-especial">Este texto será azul.</p>
<div class="texto-especial">Y este no cambiará.</div>

Cómo funciona:

• El selector p.texto-especial selecciona elementos <p> con la clase texto-especial.
• El estilo { color: blue; } aplica un color azul a los elementos seleccionados.

Los desarrolladores utilizan constantemente el atributo class. No solo simplifica el estilo, sino que también ayuda a organizar mejor el código y a mantenerlo más fácilmente.

Consulta más información sobre selectores complejos en el siguiente artículo muy completo: Selectores CSS: Guía para Principiantes.