Sélecteurs de groupe

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 14 sur 76.

Le sélecteur de groupe (ou Group selector) est utilisé pour sélectionner plusieurs éléments HTML et leur appliquer les mêmes styles. Cela est particulièrement utile lorsque vous souhaitez appliquer un ensemble de règles (rules) de style communes à différents éléments sans avoir à écrirem (Write) des règles séparées pour chaque élément. En groupant les sélecteurs (Selectors), vous pouvez rédiger un code CSS plus concis et efficace.

Pour utiliser un sélecteur de groupe, vous listez les sélecteurs que vous souhaitez grouper, séparés par des virgules (,). Voici la syntaxe de base :

selector1, selector2, selector3 {
    property: value;
}

Par exemple, mettons que vous souhaitiez appliquer la même couleur de texte et la même taille de police à tous les éléments <h1>, <h2> et <p>. Vous pouvez utiliser un sélecteur de groupe comme ceci :

h1, h2, p {
    color: blue;
    font-size: 16px;
}

Dans cet exemple, le sélecteur de groupe cible tous les éléments <h1>, <h2> et <p>. Les déclarations définissent la couleur du texte sur bleu et la taille de police sur 16 pixels pour tous ces éléments.

Vous pouvez grouper n'importe quel type de sélecteurs, y compris les sélecteurs de type, les sélecteurs de classe et les sélecteurs d'ID :

h1, .highlight, #intro {
    background-color: yellow;
}

Défi

Facile

Vous disposez d’un document HTML contenant divers éléments, notamment des titres (<h1>, <h2>), des paragraphes (<p>) et une division (<div>). Votre tâche consiste à utiliser un sélecteur de groupe pour mettre ces éléments en forme. Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant un sélecteur de groupe qui cible tous les éléments <h1> et <h2>. Définissez la couleur du texte de ces éléments sur rouge.
Écrivez une règle CSS utilisant un sélecteur de groupe qui cible tous les éléments <p> ainsi que l’élément <div>. Définissez la couleur d’arrière-plan de ces éléments sur lightgray et la taille de police sur 18 pixels.

Essayez vous-même

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>