Comment cibler une plage de colonnes spécifique dans un tableau à l'aide de sélecteurs CSS ?

Sélecteur CSS pour une plage de colonnes spécifique

Cette question répond à la nécessité d'adapter un sélecteur CSS pour l'appliquer à une plage spécifique de colonnes dans un tableau. Le sélecteur d'origine, .myTableRow td:nth-child(?), cible un élément enfant spécifique en fonction de sa position dans la ligne du tableau. Cependant, la question cherche un moyen d'appliquer le sélecteur aux colonnes 2 à 4.

Comme le suggère la réponse, une approche consiste à utiliser le sélecteur suivant :

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

Ce sélecteur cible toutes les cellules du tableau (td) qui sont le 2ème enfant ou plus et jusqu'au 4ème enfant dans les lignes avec la classe myTableRow. Cela sélectionne efficacement la plage de colonnes souhaitée.

Un autre avantage de cette approche est sa robustesse, car elle n'est pas liée au nombre total de colonnes dans le tableau. Cela fonctionnera quel que soit le nombre de colonnes présentes.

Explication de la syntaxe du sélecteur :

• :nth-child(n X) : sélectionne tous les enfants à partir de la Xème position.
• :nth-child(-n X) : Sélectionne tous les enfants jusqu'à la Xème position.

Lorsqu'ils sont combinés, ces sélecteurs ciblent les éléments qui relèvent de une plage spécifique, comme illustré dans l'exemple de code fourni.

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!