Comment sélectionner des colonnes spécifiques dans un tableau à l'aide des sélecteurs CSS « ​​nth-child » ?

Sélecteurs CSS pour la nième plage

Pour sélectionner des colonnes spécifiques dans un tableau, utilisez le sélecteur CSS du nième enfant. Le sélecteur fourni, « .myTableRow td:nth-child(?) », cible les cellules de données du tableau (td) en fonction de leur position dans la ligne du tableau parent. Cependant, l'espace réservé au point d'interrogation doit être remplacé par une plage.

Sélection de la plage du nième enfant

Pour sélectionner les colonnes 2 à 4, utilisez l'une de ces approches :

Option 1 :

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
  background-color: #FFFFCC;
}</code>

Cette syntaxe assure la sélection des cellules à partir de la 2ème position (n 2) et jusqu'à la 4ème position (-n 4).

Option 2 (syntaxe plus claire) :

<code class="css">.myTableRow td:nth-child(2):nth-child(4){
  background-color: #FFFFCC;
}</code>

Cette alternative fournit une spécification de plage plus explicite, identifiant explicitement les colonnes 2 et 4. Elle élimine le besoin de calculer le nombre total de colonnes.

Explication de la syntaxe nth-Child :

• ':nth-child(n X)' cible les éléments de la position 'Xth' en avant.
• ':nth-child(-n X)' cible les éléments jusqu'à la position 'Xth'.

Exemple :

Considérez le code HTML suivant :

<code class="html"><table class="myTable">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table></code>

L'application du sélecteur '.myTable tr:nth-child(2)' mettrait en surbrillance la deuxième ligne du tableau.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!