Utiliser plusieurs classes dans un élément en CSS

1. Attribuez plusieurs classes à un élément et stylisez les deux classes à la fois dans CSS
2. Attribuez plusieurs classes à un élément et stylisez les deux classes individuellement dans CSS

Ce tutoriel présentera des méthodes pour utiliser les multiples classes dans un seul élément en CSS.

Attribuez plusieurs classes à un élément et stylisez les deux classes à la fois dans CSS

En HTML, on utilise l’attribut class pour affecter la classe à un élément. Nous pouvons appliquer la classe sur tous les éléments en HTML comme p, h1-h6, a, div, et bien d’autres. En CSS, on utilise le sélecteur de classe . pour sélectionner l’élément avec le nom de classe respectif, et nous pouvons lui appliquer des styles. Mais il y a des cas où nous voulons affecter plusieurs éléments à une seule classe et styliser les classes. Dans de tels cas, HTML nous permet d’affecter plusieurs classes à un seul élément. Nous pouvons écrire plusieurs noms de classe séparés par des espaces dans n’importe quel élément. CSS nous permet également de styliser de telles classes en sélectionnant les deux classes à la fois. Nous pouvons utiliser le . selector pour sélectionner la première classe et sélectionner à nouveau la deuxième classe sans laisser d’espace. Ensuite, nous pouvons définir les styles pour les classes sélectionnées. Nous pouvons affecter plus de deux classes à un seul élément et appliquer les styles à toutes les classes à la fois.

Par exemple, créez trois balises p en HTML et attribuez-leur les noms de classe first, second et first second. Notez que pour la troisième classe, il reste un espace entre les noms de classe. Écrivez les textes KTM, Honda et Kawasaki pour les trois classes entre les balises p. Sélectionnez la classe first en CSS et définissez sa color sur orange. De même, sélectionnez la classe second et réglez-la sur red et enfin sélectionnez les deux classes comme .first.second et définissez la couleur sur green.

Dans l’exemple ci-dessous, nous avons utilisé plusieurs classes dans un seul élément et stylisé ces classes à la fois.

Exemple de code :

<p class="first">KTM</p>
<p class="second">Honda</p>
<p class="first second">Kawasaki</p>

.first { color: orange; }
.second { color: red; }
.first.second { color: green; }

Attribuez plusieurs classes à un élément et stylisez les deux classes individuellement dans CSS

Nous pouvons affecter plusieurs classes à un seul élément HTML et styliser les deux classes individuellement pour écrire du CSS plus efficacement. En utilisant cette approche, nous pouvons contrôler la redondance dans les styles appliqués. Nous pouvons appliquer les styles communs à plusieurs classes et appliquer les styles uniques à la classe spécifique.

Par exemple, créez une classe title dans une balise p et écrivez du texte. De même, créez une autre balise de paragraphe et attribuez-lui les multiples classes title text. Écrivez du texte sur la balise de paragraphe. En CSS, sélectionnez la classe title et définissez la background-color sur skyblue. Sélectionnez ensuite la classe text et donnez-lui la couleur green.

Ici, la couleur d’arrière-plan des deux paragraphes sera définie sur skyblue. C’est parce que nous avons stylisé la classe title pour définir la couleur de fond. Et, il y a une classe title dans les deux paragraphes. Cependant, le deuxième paragraphe ne changera sa couleur qu’en green car nous avons appliqué ce style uniquement à la classe text. Cette approche nous permet d’utiliser plusieurs classes pour un seul élément afin d’appliquer les styles communs et le style individuel aux éléments. De cette façon, nous pouvons affecter plusieurs classes à un seul élément et styliser les classes individuellement pour écrire un CSS efficace.

Exemple de code :

<p class="title">
 Hello there!
</p>
<p class="title text">
 Welcome to Rara Lake
</p> 

.title {
    margin-bottom: 30px;
    background-color: skyblue;
}

.text {
    color: green;
}