Classe - Astuces CSS | CSS Almanach 2025

Un sélecteur de classe en CSS commence par un point (.), Comme ceci:

.class ( )

Un sélecteur de classe sélectionne tous les éléments avec un attribut de classe correspondant.

Par exemple, cet élément:

Push Me

est sélectionné et stylé comme ceci:

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

Vous pouvez donner à une classe n'importe quel nom commençant par une lettre, un tiret (-) ou un trait de soulignement (_). Vous pouvez utiliser des nombres dans les noms de classe, mais un nombre ne peut pas être le premier caractère ou le deuxième caractère après un trait d'union. À moins que vous ne deveniez fou et que vous ne commenciez à échapper aux sélecteurs, ce qui peut devenir bizarre:

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

Un élément peut avoir plusieurs classes:


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

Un élément avec plusieurs classes est stylé avec les règles CSS pour chaque classe. Vous pouvez également combiner plusieurs classes pour sélectionner des éléments:

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

Cette démonstration montre comment les sélecteurs à classe unique sont différents des sélecteurs combinés:

Vous pouvez également limiter un sélecteur de classe à un type d'élément spécifique, parfois appelé "qualification de balise":

ul.menu ( list-style: none; )

Spécificité

En soi, un sélecteur de classe a une valeur de spécificité de 0, 0, 1, 0. C'est «plus puissant» qu'un sélecteur d'élément (comme:) a ( )mais moins puissant qu'un sélecteur d'ID (comme #header ( )). La spécificité augmente lorsque vous combinez des sélecteurs de classe ou limitez le sélecteur à un élément spécifique.

Accéder aux classes avec JavaScript

Vous pouvez lire et manipuler les classes d'un élément avec classListen JavaScript. Par exemple, l'ajout d'une classe pourrait être comme:

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

Cette démo montre des exemples basiques d' classListutilisation:

jQuery a aussi des méthodes pour interagir avec les classes, y compris .addClass(), .removeClass(), .toggleClass()et .hasClass().

Plus d'information

Lisez la spécification W3C pour les sélecteurs de classe.
En savoir plus sur les noms de classes sémantiques.
En savoir plus sur la spécificité.
Découvrez la différence entre les classes et les ID.
Découvrez les sélecteurs de classes multiples et les combinaisons de sélecteurs de classe / ID.
Découvrez l'API .classList.
Découvrez la manipulation de classe dans jQuery.