Sélecteurs de classe
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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.
css
/* 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
css
.classy {
background-color: skyblue;
}
.toto {
font-weight: bold;
}
HTML
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
| Specification |
|---|
| Selectors Level 4 # class-html |
Compatibilité des navigateurs
Chargement…