Clase - Trucos CSS | Almanaque CSS 2024

Un selector de clases en CSS comienza con un punto (.), Así:

.class ( )

Un selector de clase selecciona todos los elementos con un atributo de clase coincidente.

Por ejemplo, este elemento:

Push Me

se selecciona y se diseña así:

.big-button ( font-size: 60px; )

Puede asignar a una clase cualquier nombre que comience con una letra, un guión (-) o un guión bajo (_). Puede usar números en los nombres de las clases, pero un número no puede ser el primer carácter ni el segundo después de un guión. A menos que te vuelvas loco y empieces a escapar de los selectores, lo que puede volverse extraño:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Un elemento puede tener más de una clase:


 This paragraph will get styles from .intro and .blue selectors.

Un elemento con varias clases se diseña con las reglas CSS para cada clase. También puede combinar varias clases para seleccionar elementos:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Esta demostración muestra en qué se diferencian los selectores de una sola clase de los selectores combinados:

También puede limitar un selector de clase a un tipo específico de elemento, que a veces se denomina "calificación de etiqueta":

ul.menu ( list-style: none; )

Especificidad

Por sí mismo, un selector de clase tiene un valor de especificidad de 0, 0, 1, 0. Eso es "más poderoso" que un selector de elementos (como :) a ( )pero menos poderoso que un selector de ID (como #header ( )). La especificidad aumenta cuando combina selectores de clases o limita el selector a un elemento específico.

Acceder a clases con JavaScript

Puede leer y manipular las clases de un elemento classListen JavaScript. Por ejemplo, agregar una clase podría ser como:

document.getElementById('italicize').classList.add('italic');

Esta demostración muestra ejemplos básicos de classListuso:

jQuery también tiene métodos para interactuar con las clases, incluyendo .addClass(), .removeClass(), .toggleClass(), y .hasClass().

Más información

Lea la especificación W3C para selectores de clases.
Obtenga más información sobre los nombres de clases semánticas.
Obtenga más información sobre la especificidad.
Conozca la diferencia entre clases e identificaciones.
Aprenda sobre selectores de clases múltiples y combinaciones de selectores de clase / ID.
Obtenga información sobre la API .classList.
Aprenda sobre la manipulación de clases en jQuery.