Sélecteurs de groupe

Fait partie de la section Styling with 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 blue et la taille de la 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 groupé pour styliser ces éléments. Suivez les étapes ci-dessous :

Écrivez une règle CSS utilisant un sélecteur groupé qui cible tous les éléments <h1> et <h2>. Définissez la couleur du texte de ces éléments sur red.
Écrivez une règle CSS utilisant un sélecteur groupé qui cible tous les éléments <p> et l'élément <div>. Définissez la couleur de fond de ces éléments sur lightgray et la taille de police à 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>