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 est utilisé pour sélectionner plusieurs éléments HTML et leur appliquer les mêmes styles. Ceci est particulièrement utile lorsque vous souhaitez appliquer un ensemble commun de styles à différents éléments sans avoir à écrire des règles distinctes pour chaque élément. En regroupant les sélecteurs, vous pouvez écrire un code CSS plus concis et plus 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, supposons 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 en bleu et la taille de la police à 16 pixels pour tous ces éléments.

Vous pouvez regrouper 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

On vous donne un document HTML avec divers éléments, y compris des titres (<h1>, <h2>), des paragraphes (<p>) et une division (<div>). Votre tâche consiste à utiliser un sélecteur de groupe pour styliser ces éléments. 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 red.
Écrivez une règle CSS utilisant un sélecteur de groupe qui cible tous les éléments <p> et l'élément <div>. Définissez la couleur d'arrière-plan de ces éléments sur lightgray et la taille de la police sur 18 pixels.

Aide-mémoire

Le sélecteur de groupe vous permet d'appliquer les mêmes styles à plusieurs éléments HTML en séparant les sélecteurs par des virgules (,) :

selector1, selector2, selector3 {
    property: value;
}

Exemple de regroupement de sélecteurs d'éléments :

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

Vous pouvez regrouper n'importe quel type de sélecteurs (type, classe, ID) :

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

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>