Comment puis-je obtenir le n-ième enfant d'un élément à l'aide de sélecteurs CSS2?

Vous pouvez utiliser adjacent frère combinators en collaboration avec le :first-child pseudo-classe, en répétant les combinators autant de fois que vous avez besoin pour atteindre un certain nième enfant. Cela est également mentionné dans une réponse à une autre question.

Pour tout élément E, commencer avec E:first-child, puis ajouter + E pour les autres enfants jusqu'à ce que vous atteignez l'élément que vous ciblez. Vous n'avez pas à utiliser le même élément E, bien sûr; vous pouvez changer cela pour n'importe quel type, classe, ID, etc, mais les choses importantes sont les :first-child et + signes.

Par exemple, pour obtenir la troisième li de ses ol, la suite sélecteur de CSS3:

ol > li:nth-child(3)

Sont reproduits dans CSS2 comme suit:

ol > li:first-child + li + li

Une illustration:

<ol>
  <li></li> <!-- ol > li:nth-child(1), ol > li:first-child -->
  <li></li> <!-- ol > li:nth-child(2), ol > li:first-child + li -->
  <li></li> <!-- ol > li:nth-child(3), ol > li:first-child + li + li -->
  <li></li> <!-- ol > li:nth-child(4), ol > li:first-child + li + li + li -->
</ol>

Noter que depuis il n'y a pas de frère, de combinators qui regarde précédent frères et sœurs (ni dans CSS2, ni CSS3), vous ne pouvez pas imiter :nth-last-child() ou :last-child à l'aide de sélecteurs CSS2.

En outre, vous ne pouvez émuler :nth-child(b) pour un enfant à un moment, où b est un nombre constant dans la formule an+b (comme décrit dans la spec); vous ne pouvez pas réaliser toutes les formules complexes avec adjacents frère combinators seul.