Sélecteur MULTIPLE

Rôle

Le sélecteur multiple, désigné par la virgule ,permet de regroupés plusieurs sélecteurs . Vous pouvez l’utiliser pour sélectionner, par exemple, toutes les balises paragraphe (p) et toutes les balises titres de niveau 1 (h1)

Si vous voulez faire référence à toutes les balises HTML, utiliser le sélecteur universel.

Le code ci dessous cible tous les titres.

<h1>Titre 1</h1>
<p>lorem ipsum</p>
<h2>Titre 2</h2>
<p>lorem ipsum</p>
<h3>Titre 2</h3>
<p>lorem ipsum</p>

Cible en CSS

h1,h2,h3 {
    color: red;
}

Note :vous pouvez regrouper plusieurs types de sélecteurs différents, un sélecteur ID avec un sélecteur contextuel, par exemple :

#header, section div p.gras {
    color: red;
}

Testez vous-même ce sélecteur

Utilisez Codepen.

– Le code CSS

h1, h2{
    color : green;
}

– Le code HTML

<h1>Titre</h1>
<p>Lorem dolor sit amet, consectetur adipisicing elit. Eius commodi delectus </p>
<h2>Sous-titre</h2>
<p>quam doloribus dolore, voluptatibus laborum saepe quod aut labore voluptatem modi ad! Expedita autem, voluptatibus beatae cum, dignissimos voluptatem.</p>

Résultat

Dans cet exemple, les titres (h1 et h2) sont devenus verts

Compatibilité

Le sélecteur multiple est pris en charge par tous les principaux navigateurs

A voir aussi

#id (sélecteur id)
.class (sélecteur class)
p (sélecteur balise)
#head p>em (sélecteur contextuel)
* (sélecteur universel)
p a (sélecteur descendant)
p>a (sélecteur enfant)
[] (sélecteur d’attribut)
[attribut=valeur]
[attribut~=valeur]
[attribut|=valeur]
[attribut^=valeur]
[attribut$=valeur]
[attribut*=valeur]
h1+p (sélecteur adjacent)
h1~p (sélecteur de proximité)