Dans notre dernier article à propos des sélecteurs, nous examinerons les combinaisons et les groupes de sélecteurs — deux moyens de combiner plusieurs sélecteurs entre eux pour des capacités de sélection plus poussées.

Combinaisons et  groupes de sélecteurs

L'utilisation d'un seul sélecteur à la fois peut être utile tous en s'avérant mauvais dans certaines situations. Les sélecteurs des CSS deviennent encore plus efficaces quand on commence à les combiner pour effectuer de fines selections. Les CSS ont plusieurs façons de sélectionner les éléments selon la manière dont ils sont reliés les unes aux autres. Ces relations s'expriment par des combinaisons comme suit (A et B représentent n'importe quel sélecteur vu précédemment) :

Désignation Syntaxe Sélections
Groupe de sélecteurs A, B Tout élément correspondant à A et/ou B (voir Groupe de sélecteurs dans une règle, plus bas — Le Groupe de sélecteurs n'est pas considéré comme étant une combinaison).
Sélecteur de descendant A B Tout élément correspondant à B qui est un descendant d'un élément correspondant à  A (c'est à dire, un enfant ou une enfant d'un enfant, etc.).
Sélecteur d'enfant A > B Tout élément correspondant à B qui est un  enfant direct d'un élément correspondant à A.
Sélecteur de fratrie adjacente A + B Tout élément correspondant à B qui est le frère qui suit un élément issu de A (c'est à dire, l'enfant suivant du même parent).
Sélecteur géneral de fratrie A ~ B Tout élément correspondant à B qui est un des frères suivant d'un élément issu de A (c'est à dire, un quelconque des frères suivants issus du même parent).

Exemple de combinaison

Voici un exemple avec tout ce qui précède :

<table lang="fr" class="avec-devise">
  <thead>
    <tr>
      <th scope="col">Produit</th>
      <th scope="col">Qté.</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Chaise de jardin</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Barre de riz à la guimauve</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Livre</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

Puis, utilisons la feuille de style suivante :

/* Réglage de base du tableau */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Tous les éléments <td> et <th> dans <table>, la
   virgule n'est pas une combinaison, elle vous permet uniquement de 
   cibler plusieurs sélecteurs avec le même jeu de régles CSS */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* Tout <th> dans <thead> dans <table> */
table thead th {
  color: white;
  background: black;
}

/* Tout <td> précédé d'un autre <td>,
   dans <tbody> dans <table> */
table tbody td + td {
  text-align: center;
}

/* Tout <td> dernier enfant dans <tbody> dans <table> */
table tbody td:last-child {
  text-align: right
}

/* Tout <th> dans <tfoot> dans <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* Tout <td> précédé d'un <th> dans <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* Tous les pseudo-éléments "avant" <td> qui sont dernier enfant,
   dans des éléments de la classe "avec-devise" ayant aussi un
   attribut "lang" de la valeur "en-US" */
.avec-devise[lang="en-US"] td:last-child::before {
  content: '$';
}

/* Tous les pseudo-éléments "après" <td> qui sont dernier enfant,
   dans les éléments de la classe "avec-devise" ayant aussi un
   attribut "lang" de la valeur "fr" */
.avec-devise[lang="fr"] td:last-child::after {
  content: ' €';
}

Cet ensemble donne le tableau suivant, de composition plutôt agréable :

Apprentissage actif : écriture de vos propres combinaisons

L'exemple ci-dessus a été pensé pour montrer le niveau de complexité atteignable avec des combinaisons. Dans cet apprentissage actif, écrivez vos propres sélecteurs en y incluant des combinaisons plus simples. Dans cet exercice, vous devrez ajouter un sélecteur aux règles 2 à 4 :

  1. des liens de style, mais uniquement pour ceux dans une liste non ordonnée.
  2. des liens de style dans une liste non ordonnée,mais uniquement quand ils sont survolés par le pointeur de souris.
  3. un style pour le paragraphe placé directement après l'en-tête de plus haut niveau.

Si vous faites une erreur, vous pouvez tout Réinitialiser à l'aide du bouton correspondant. Si vous êtes vraiment bloqué, pressez Voir la solution pour afficher une réponse possible.

Groupes de sélecteurs avec une même règle

Vous avez déjà vu plusieurs exemples de cela en action, mais disons-le clairement. Vous pouvez écrire des groupes de sélecteurs séparés par des virgules pour appliquer une même règle à plusieurs ensembles d'éléments sélectionnés en même temps. Par exemple :

p, li {
  font-size: 1.6em;
}

ou ceci :

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

Dans l'article suivant

Félicitations — vous voilà au terme du long voyage d'apprentissage des sélecteurs. Même les développeurs web les plus compétents sont encore étonnés de ce qu'il est possible de faire avec des sélecteurs. Cependant, ne vous croyez pas mauvais si vous ne vous souvenez pas de toutes les options — marquez la page principale d'un signet et revenez-y si besoin est.

Dans notre prochain article, nous aborderons un autre sujet fondamental des CSS — les types de valeurs que les propriétés peuvent prendre et les unités possibles dans l'expression des longueurs, des couleurs ou autres valeurs souhaitées.  Examinons les valeurs des CSS et unités.

Dans ce module

Étiquettes et contributeurs liés au document

Contributeurs à cette page : yatoogamii, Dralyab
Dernière mise à jour par : yatoogamii,