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
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet Oui | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet Oui | Chrome Android Support complet Oui | Edge Mobile Support complet Oui | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet Oui |
Légende
- Support complet
- Support complet