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;
}

/* Cible tous les éléments <li> ayant une classe qui */
/* contient à la fois "spacious" et "elegant"        */
li.spacious.elegant {
  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

.classy {
  background-color: skyblue;
}
.toto {
 font-weight: bold;
}

HTML

<div class="classy">Voici un div avec du texte.</div>
<div class="toto classy truc">Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout de même !</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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet

Étiquettes et contributeurs liés au document

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