El atributo de class global es una lista de registros separados por espacios de las clases dependientes del elemento. Las clases permiten la selección y el acceso a CSS y Javascript mediante selectores de clases o funciones como los métodos DOM document.getElementsByClassName. Los desarrolladores utilizan el atributo de class todo el tiempo. No sólo facilita el diseño, sino que también le ayuda a organizar mejor su código y facilitar su mantenimiento.
Ejemplo 1
<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p> <p>Narrator: I must warn you now folks that this beginning is very exciting.</p> <p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>
Se pueden asignar una o más clases a un elemento, separadas por espacios.
Ejemplo 2
<!-- una clase --> <div class="container"> <!-- ... --> </div> <!-- Varias clases --> <div class="container special-box"> <!-- ... --> </div>
Ejemplo 3
.highlighted-text { background-color: yellow; font-size: 18px; } <span class="highlighted-text">Este texto será resaltado.</span>
Ejemplo 4
const elements = document.querySelectorAll('.clickable'); elements.forEach(element => { element.addEventListener('click', () => { alert('click!'); }); }); <button class="click">Próximo</button>
Selectores complejos en CSS: en algunos casos, necesitamos aplicar una clase solo a una etiqueta HTML específica, ignorando todas las demás.
Ejemplo 5
/* Sólo para elementos <p> con clase special-text */ p.special-text { color: blue; } <p class="special-text">Este texto será azul.</p> <div class="special-text">Y este permanecerá sin cambios.</div>