.
Sélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
Exemple
#.btn {
padding: 8px 14px;
border: 0;
border-radius: 8px;
background: #3f3f46;
color: #fff;
font-weight: 600;
}
.btn.primary {
background: #7c3aed;
}<div style="display: flex; gap: 8px;">
<button class="btn" type="button">Annuler</button>
<button class="btn primary" type="button">Enregistrer la progression</button>
</div>Définition et utilisation
#Un sélecteur de classe commence par un point : .card sélectionne chaque élément qui a le mot card dans son attribut class. L’attribut peut contenir plusieurs classes séparées par des espaces (class="card pro"), et le sélecteur correspond dès que celle que vous cherchez en fait partie.
Les classes sont la base d’un bon CSS. Vous pouvez donner une même classe à de nombreux éléments de types différents, et un même élément peut porter plusieurs classes. La spécificité d’une classe est (0, 1, 0) : plus élevée que celle d’un sélecteur de type, mais bien plus faible que celle d’un identifiant, ce qui rend les règles faciles à combiner et à écraser.
Plusieurs classes écrites ensemble, sans espace, signifient « toutes à la fois » : .btn.primary ne touche que l’élément qui a les deux classes. Avec un espace (.card .title), c’est un tout autre sélecteur : le combinateur descendant.
La casse compte : .Card et .card sont deux classes différentes. Dans un sélecteur, le nom d’une classe ne peut pas non plus commencer par un chiffre (par exemple .1colonne) sans échappement du caractère, donc le plus simple est d’éviter ce genre de noms.
Syntaxe
#.nom-de-classe { propriété: valeur; }Variantes d’écriture
#- Chaque élément avec la classe
tag, quelle que soit sa balise et ses autres classes. - Deux classes sans espace : l’élément doit avoir les deux à la fois.
- Une balise combinée à une classe : seulement les boutons qui ont la classe
tag. - Un sélecteur d’attribut qui fonctionne exactement comme
.taget a le même poids. Une classe n’est qu’un raccourci pratique.
Variantes d’écriture en pratique
#.tag
tag, quelle que soit sa balise et ses autres classes..tag { background: #7c3aed; color: #fff; }.tag.hot
.tag.hot { background: #7c3aed; color: #fff; }[class~="tag"]
.tag et a le même poids. Une classe n’est qu’un raccourci pratique.[class~="tag"] { background: #7c3aed; color: #fff; }Plus d’exemples
#.card {
padding: 12px 14px;
border-radius: 12px;
background: #18181b;
}
.card__title {
margin: 0 0 4px;
font-size: 16px;
}
.card--pro {
outline: 2px solid #f59e0b;
}<div style="display: grid; gap: 10px;">
<div class="card">
<h3 class="card__title">Cours HTML</h3>
<p style="margin: 0; color: #a1a1aa;">Carte classique</p>
</div>
<div class="card card--pro">
<h3 class="card__title">Cours React</h3>
<p style="margin: 0; color: #a1a1aa;">Carte avec le modificateur card--pro</p>
</div>
</div>En BEM, chaque partie d’un composant reçoit sa propre classe, donc tous les sélecteurs ont le même poids, faible, et ne dépendent pas de la structure HTML.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Nommez les classes selon leur rôle, pas selon leur apparence :
.alertsurvit à un changement de couleur,.texte-rougenon. - Plutôt que d’allonger le sélecteur (
.sidebar .menu .item), donnez à l’élément sa propre classe. Les règles seront plus courtes, et la spécificité basse et prévisible. - En JavaScript, vous ajoutez et retirez des classes avec
element.classList.add("active")ouclassList.toggle(). C’est le moyen le plus simple de changer l’apparence d’un élément en réaction à une action de l’utilisateur.
Entrées associées
#- #idSélectionne l’élément portant l’identifiant indiqué dans l’attribut id. Il a une spécificité très élevée, donc ses règles sont difficiles à écraser par la suite.
- Sélecteur de typeSélectionne tous les éléments portant un nom de balise donné, par exemple chaque paragraphe p ou chaque élément de liste li.
- [attribut]Sélectionne les éléments selon un attribut HTML et sa valeur : exacte, au début, à la fin, un fragment, ou un mot dans une liste.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- :not()Sélectionne les éléments qui ne correspondent à aucun des sélecteurs fournis, ni à aucun de la liste.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.