Comment sélectionner une plage d'éléments avec CSS nth-child ?

Amélioration des sélecteurs CSS pour la nième plage

Le sélecteur nième enfant en CSS permet une sélection précise d'éléments en fonction de leur position dans un élément parent. Cependant, il peut être difficile d'appliquer ce sélecteur à des plages qui ne sont pas définies par un numéro spécifique.

Extension de la sélection de plage du nième enfant

Considérez le sélecteur CSS suivant :

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

Ce sélecteur vise à appliquer une couleur d'arrière-plan à une plage de valeurs éléments dans un avec la classe "myTableRow". Cependant, l'espace réservé au point d'interrogation (?) laisse la plage indéfinie.

Pour appliquer ce sélecteur à colonnes 2 à 4, vous pouvez utiliser le CSS suivant :

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

Comprendre le sélecteur amélioré

Ce sélecteur utilise deux sous-sélecteurs de nième enfant supplémentaires :

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

En combinant ces deux sous-sélecteurs, nous créons effectivement une plage qui comprend des éléments de la 2e à la 4e position.

Exemple d'utilisation

Considérez le tableau HTML suivant :

<code class="html"><table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table></code>

L'application du sélecteur CSS amélioré à ce tableau entraînera l'application d'une couleur d'arrière-plan aux 2e, 3e et 4e éléments dans "myTableRow" . En effet, ces éléments se situent dans la plage définie de 2 à 4.

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!