Atributo class

El atributo class define una o varias clases para un elemento (por elemento se entiende una etiqueta).

Esto se hace para luego poder referirse a través de CSS a un grupo de elementos que tengan la misma clase definida, y aplicarles propiedades específicas (por ejemplo, cambiar el color del texto, el tamaño de la fuente, etc.).

También existe el atributo id que, de manera similar al atributo class, permite seleccionar elementos en una página HTML.

La diferencia entre el atributo class y el atributo id es que class selecciona un grupo de elementos (incluso si se le asigna a un solo elemento - posteriormente se le puede asignar a otro), mientras que id selecciona un elemento único (no debe haber otro elemento con el mismo id en la página web, de lo contrario habrá un conflicto).

¿Cómo saber si asignarle a un elemento una clase o un id? La clase se asigna a aquellos elementos que se repiten en las páginas del sitio web (para no tener que escribir el mismo código CSS varias veces). Incluso si actualmente este elemento es único, pero sientes que podrían aparecer elementos similares en el futuro - asígnale una clase a este elemento. Si estás seguro de que dicho elemento es único - entonces asígnale un id. Aunque actualmente existe una tendencia a asignar clases a todos los elementos, y dejar el id para JavaScript, esta no es una regla universalmente aceptada.

A un elemento se le pueden asignar varias clases; en este caso, deben enumerarse separadas por espacios.

Los nombres de las clases deben escribirse con letras inglesas, números, sin espacios (el espacio separa las clases entre sí; en su lugar, se puede usar guión bajo o guión). Las clases no deben comenzar con un número (en HTML5 ya es posible, pero no funcionará en navegadores antiguos).

Los nombres de las clases deben darse en inglés (¡y no en ruso, simplemente con letras inglesas!). Los nombres deben ser significativos, que reflejen la esencia de la clase.

Ejemplo

Asignemos el color rojo al texto de todos los párrafos con la clase test:

<p class="test">Párrafo con la clase test.</p>
<p>Párrafo de control sin clase.</p>

.test {
	color: red;
}

Ejemplo . Múltiples clases para un elemento

Aquí, asignemos varias clases al primer párrafo - test1 y test2 (escribiéndolas separadas por espacio). La clase test1 asigna el color rojo al texto, y la clase test2 asigna el tamaño de fuente a 20px. Al segundo párrafo se le asignó solo la clase test1 (este párrafo se volverá rojo), y al tercer párrafo - la clase test2 (este párrafo tendrá un tamaño de fuente de 20px). El primer párrafo, que tiene dos clases, tendrá tanto el color rojo como el tamaño de fuente de 20px simultáneamente:

<p class="test1 test2">Párrafo con dos clases: test1 y test2.</p>
<p class="test1">Párrafo con la clase test1.</p>
<p class="test2">Párrafo con la clase test2.</p>
<p>Párrafo de control sin clases.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Véase también

el atributo id,
que asigna identificadores únicos a los elementos