MDN will be in maintenance mode on Friday September 22nd, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Les sélecteurs de classe CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

/* Cible tous les éléments ayant la classe "spacious" */
.spacious {
  margin: 2em;
}

/* Cible tous les éléments <li> ayant la classe "spacious" */
li.spacious {
  margin: 2em;
}

L'attribut class est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

Syntaxe

.nomdeclasse { déclarations CSS }

Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :

[class~=nomdeclasse] { déclarations CSS }

Exemples

CSS

div.classy {
  background-color: skyblue;
}

HTML

<div class="classy">Voici un div avec du texte.</div>
<div>En voilà un autre.</div>

Résultat

Spécifications

Spécification État Commentaires
Selectors Level 4
La définition de 'class selectors' dans cette spécification.
Version de travail Aucune modification.
Selectors Level 3
La définition de 'class selectors' dans cette spécification.
Recommendation  
CSS Level 2 (Revision 1)
La définition de 'child selectors' dans cette spécification.
Recommendation  
CSS Level 1
La définition de 'child selectors' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? ? (Oui) ? ? ?

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, goofy_bz, FredB
 Dernière mise à jour par : SphinxKnight,