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. 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
span.classy {
background-color: blue;
}
HTML
<span class="classy">Voici un span avec du texte.</span> <span>En voilà un autre.</span>
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) | ? | ? | ? |