Chapitre 80 | Sélecteurs multiples en CSS

Sélecteurs multiples en CSS

En CSS, il est possible d’appliquer les mêmes styles à plusieurs éléments en listant leurs sélecteurs, séparés par des virgules. Voici un exemple :

.classA, .classB, .classC, .classD {
    color: red; /* Tous les textes auront la couleur rouge */
    font-weight: bold; /* Tous les textes seront en gras */
}

Analyse :

Sélecteurs multiples : .classA, .classB, .classC, .classD.
Effet : tous les éléments ayant l’une de ces classes (ou balises, selon le sélecteur) auront la couleur rouge et seront en gras.

Attention :

Chaque sélecteur doit être séparé par une virgule, sauf le dernier.

Exercice : Appliquer des styles à plusieurs classes

Objectif :

Créer une page HTML où plusieurs classes partagent le même style, défini dans un fichier CSS.

Étape 1 : Créer le fichier HTML

Voici un exemple de fichier HTML contenant quatre paragraphes, chacun avec une classe différente :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exercice : Sélecteurs multiples</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p class="classA">Texte de classA.</p>
    <p class="classB">Texte de classB.</p>
    <p class="classC">Texte de classC.</p>
    <p class="classD">Texte de classD.</p>
</body>
</html>

Étape 2 : Créer le fichier CSS

Dans un fichier style.css, appliquez un style unique à toutes les classes mentionnées :

.classA, .classB, .classC, .classD {
    color: red; /* Tous les textes auront la couleur rouge */
    font-weight: bold; /* Tous les textes seront en gras */
}

Étape 3 : Tester l’affichage

Ouvrir le fichier HTML dans un navigateur.
Vérifier que tous les paragraphes ont la même couleur (rouge) et sont en gras.

Étape 4 : Modification simple

Ajoutez un paragraphe sans classe pour observer la différence :

<p>Ceci est un paragraphe sans classe.</p>

Vous constaterez que ce paragraphe ne sera pas stylisé, car il n’est pas ciblé par le CSS.

Cet exercice permet de comprendre comment appliquer des styles communs à plusieurs classes tout en respectant la syntaxe des sélecteurs CSS.