Exemple 06 : Regroupement de sélecteurs

Explications :

Il arrive que vous ayez un même bloc de déclarations à appliquer à plusieurs sélecteurs. Alors, au lieu de réécrire plusieurs fois les mêmes déclarations dans la feuille de style, vous pouvez utiliser le regroupement de sélecteurs. Pour ce faire il suffit de mettre les différents sélecteurs à la suite les uns des autres, simplement séparés par une virgule et de placer le bloc de déclaration à la suite. La règle s'applique alors à tous les sélecteurs indiqués.

La première règle applique donc une bordure et une couleur de texte vert à ces quatre éléments. Grâce au regroupement de sélecteurs, il suffit de préciser ces déclarations dans une seule règle.

Il suffit cependant qu'un seul des sélecteurs de la liste soit invalide pour invalider le regroupement de sélecteurs et donc l'ensemble de la règle. Le style ne s'appliquera alors à aucun des sélecteurs. Seul Internet Explorer dans ses versions 6 et 7 fait exception à l'application de cette règle.

Un sélecteur peut, par exemple, être erroné lorsqu'on commet une erreur dans l'orthographe d'un sélecteur de type, et plus généralement lorsqu'on écrit mal un des mots-clés utilisés dans les sélecteurs, comme le nom de l'attribut pour le sélecteur d'attribut, ou encore les noms des pseuso-éléments et pseudo-classes.

La seconde règle, mettant en œuvre le regroupement de sélecteurs, devrait appliquer une couleur d'arrière-plan orange. Ce n'est pas le cas parce que dans la chaîne de sélecteurs un seul sélecteur est incorrect : on a écrit h 2 au lieu de h2. Cela invalide l'ensemble de la règle et le style ne s'applique donc à aucun des sélecteurs présents dans cette règle. Seul Internet Explorer dans ses versions 6 et 7 fait exception à l'application de ce principe.

Code XHTML et CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exemple 06 : Regroupement de sélecteurs</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
p, h2, h3, div {
        border :           1px dashed black;
        color :            #228b22;
}
p, h 2, h3, div {
        background-color : orange;
}
</style>
</head>

<body>

<h1>
Exemple 06 : Regroupement de sélecteurs
</h1>

  <h2>
Ceci est un titre de niveau 2.
  </h2>
  <h3>
Ceci est un titre de niveau 3.
  </h3>
  <p>
Ceci est un paragraphe.
  </p>
  <div>
Ceci est un élément &lt;div&gt;.
  </div>

</body>
</html>

Copyright © 2011 Christophe F. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 Euros de dommages et intérêts. Cette page est déposée.