CSS : Cibler un élément multi-classe

En HTML/CSS, il est possible d’affecter plusieurs classes à un élément. Il peut vous arriver de vouloir styler différemment des éléments qui peuvent avoir des classes multiples.

Prenons comme exemple 2 classes CSS. Vous voulez un style différent par classe et un style spécifique si l’élément contient les 2 classes.

Afin de cibler un élément qui contient les 2 classes, il suffit de « coller » les classes que l’on souhaite cibler :

<style>
.class1 {
   color : red;
}

.class2 {
   color : yellow;
}

.class1.class2 {
    color : blue;
}
</style>

Attention : bien mettre le style des elements ayant les 2 classes aprés les définitions des classes unique car sinon le style sera surchargé 😉

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *