Groupement de sélecteurs

Comment réaliser un groupement de sélecteurs ?

On peut grouper les sélecteurs. Pour cela, il faut juste les lister et séparer les éléments de la liste par une virgule. Dans l'exemple ci-dessous on a groupé tous les titres. Cela permet d'avoir des titres qui ont tous la couleur verte

h1,h2,h3,h4,h5,h6{
color: green
}
<h1>Un titre h1 en vert</h1>
<h2>Un titre h2 en vert aussi</h2>
...
<h6>Un titre h6 en vert aussi</h6>

On peut même grouper des sélecteurs de types différents. C'est-à-dire qu'il est possible de définir un style à plusieurs éléments, classes, identifiants. Comme tout à l'heure, il suffit de lister les éléments en les séparant par une virgule.

Code CSS :

h1, .uneclasse, #idspecial
{


color : red;
font-weight : bold;


}

Ainsi, Ies éléments h1, les classes uneclasse et l'identifiant idspecial auront les mêmes styles : colorés en rouge et mis en gras.

Code XHTML :

<div id="idspecial">Un id avec le même style</div>
<h1>Un titre avec le même style</h1>
<p class= "uneclasse">Un paragraphe avec le même style</p>

Et l'inverse alors ?

Un élément XHTML peut avoir plusieurs classes. On peut ainsi combiner les styles comme on veut. Pour appliquer plusieurs classes à un élément, la syntaxe est presque la même que celle définie ci-dessus. Il suffit de mettre comme valeur de l'attribut class la liste des noms des classes séparés par un espace.

Code CSS :

.vert
{


color:green;


}

.centre{


text-align : center;
}
.gras
{


font-weight:bold;


}



.fondjaune
{


background-color:yellow;


}

Code XHTML :

<h1 class="vert centre fondjaune">Application de 3 classes pour le titre </h1>
<p class="vert gras">On n'applique que deux styles au paragraphe : .vert et .gras.</p>
<p class="vert">Et là, c'est un paragraphe avec un seul style. Donc une seule classe : .vert.</p>