Groupe de sélecteurs CSS

Groupe de sélecteurs

Si l'on souhaite que les éléments h2 et les paragraphes aient une couleur grise, la méthode la plus simple consiste à utiliser la déclaration suivante :

h2, p {color:gray;}

Placer les sélecteurs h2 et p à gauche de la règle, puis les séparer par une virgule, cela définit une règle. Le style à droite (color:gray;) sera appliqué aux éléments référencés par ces sélecteurs. La virgule indique au navigateur que la règle contient deux sélecteurs différents. Sans cette virgule, la signification de la règle serait complètement différente. Voir également le sélecteur descendant.

On peut regrouper n'importe quel nombre de sélecteurs ensemble, sans restriction.

Par exemple, si vous souhaitez afficher de nombreux éléments en gris, vous pouvez utiliser une règle similaire à la suivante :

body, h2, p, table, th, td, pre, strong, em {couleur:gris;}

Astuce :En regroupant, les créateurs peuvent 'compacter' certains types de styles ensemble, ce qui permet d'obtenir des tables de styles plus concises.

Les deux groupes de règles suivants donnent le même résultat, mais il est clair qu'un d'eux est plus facile à écrire :

/* sans grouping */
h1 {couleur:bleu;}
h2 {couleur:bleu;}
h3 {couleur:bleu;}
h4 {couleur:bleu;}
h5 {couleur:bleu;}
h6 {couleur:bleu;}
/* grouping */
h1, h2, h3, h4, h5, h6 {couleur:bleu;}

Essayez-le vous-même

Les groupes offrent des choix intéressants. Par exemple, dans l'exemple suivant, tous les groupes de règles sont équivalents, chaque groupe ne montre que différentes méthodes d'organisation des sélecteurs et des groupes d'énoncés :

/* group 1 */
h1 {couleur:argenté; fond:blanc;}
h2 {couleur:argenté; fond:gris;}
h3 {couleur:blanc; fond:gris;}
h4 {couleur:argenté; fond:blanc;}
b {couleur:gris; fond:blanc;}
/* group 2 */
h1, h2, h4 {couleur:argenté;}
h2, h3 {fond:gris;}
h1, h4, b {fond:blanc;}
h3 {couleur:blanc;}
b {couleur:gris;}
/* group 3 */
h1, h4 {couleur:argenté; fond:blanc;}
h2 {couleur:argenté;}
h3 {couleur:blanc;}
h2, h3 {fond:gris;}
b {couleur:gris; fond:blanc;}

essayez-le vous-même :

Veuillez noter que dans le groupe 3, nous avons utilisé « regroupement des déclarations ». Nous vous expliquerons plus tard le « regroupement des déclarations ».}

Sélecteur joker

CSS2 a introduit un nouveau sélecteur simple - le sélecteur universel (universal selector), représenté par une étoile (*). Ce sélecteur peut correspondre à tout élément, comme un joker.

Par exemple, les règles suivantes rendront chaque élément du document rouge :

* {color:red;}

Essayez-le vous-même

Cette déclaration est équivalente à une liste de sélecteurs de regroupement pour tous les éléments du document. En utilisant le sélecteur universel, il suffit d'appuyer sur une touche (un seul astérisque) pour spécifier la valeur de l'attribut color pour tous les éléments du document en rouge.

Regroupement des déclarations

Nous pouvons regrouper à la fois les sélecteurs et les déclarations.

Si vous souhaitez que tous les éléments h1 aient un arrière-plan rouge et s'affichent en texte bleu avec une police Verdana de 28 pixels, vous pouvez écrire les styles suivants :

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

Cependant, cette méthode n'est pas très efficace. En particulier, cela peut être très ennuyeux lorsque l'on crée une liste de styles pour un élément avec plusieurs styles. Au lieu de cela, nous pouvons regrouper les déclarations ensemble :

h1 {font: 28px Verdana; color: white; background: black;}

Cela a exactement le même effet que les 3 lignes précédentes du tableau de styles.

Attention, pour regrouper les déclarations, il est important d'utiliser un point-virgule à la fin de chaque déclaration. Le navigateur ignore les espaces blancs dans le tableau de styles. Si un point-virgule est utilisé, vous pouvez utiliser sans hésitation le format suivant pour créer des styles :

h1 {
  font: 28px Verdana;
  color: blue;
  background: red;
  }

Essayez-le vous-même

Voilà, n'est-ce pas plus lisible ainsi ?

Cependant, si l'on oublie le deuxième point-virgule, l'agent utilisateur interprétera ce tableau de styles comme suit :

h1 {
  font: 28px Verdana;
  color: blue background: red;
  }

Essayez-le vous-même

Caractère background n'est pas une valeur légitime pour color, et puisqu'il ne peut être spécifié qu'une seule valeur pour color, l'agent utilisateur ignore complètement cette déclaration de couleur (y compris background: black). De cette manière, le titre h1 ne s'affichera que en bleu, sans arrière-plan rouge, mais il est plus probable qu'il ne recevra pas non plus le bleu h1. Au lieu de cela, ces titres ne s'afficheront que en couleur par défaut (généralement noire) et sans couleur d'arrière-plan. La déclaration font: 28px Verdana fonctionne toujours correctement, car elle se termine effectivement par un point-virgule.

Comme les groupes de sélecteurs, les groupes de déclarations sont également une méthode pratique qui permet de raccourcir les feuilles de style, de les rendre plus claires et plus faciles à maintenir.

Astuce :Ajouter un point-virgule après la dernière déclaration d'une règle est une bonne habitude. Lorsque vous ajoutez une autre déclaration à la règle, vous n'avez pas à vous soucier de oublier d'insérer un point-virgule.

Groupe de sélecteurs et groupe de déclarations combinés

Nous pouvons combiner les groupes de sélecteurs et les groupes de déclarations dans une règle pour définir un style relativement complexe avec peu de phrases.

Les règles suivantes attribuent un style complexe à tous les titres :

h1, h2, h3, h4, h5, h6 {
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
  }

Essayez-le vous-même

La règle suivante définit le style de tous les titres avec un texte gris sur un fond blanc, une marge interne de 10 pixels et une bordure solide de 1 pixel, avec des polices Verdana.