How do I get the nth child of an element using CSS2 selectors?

by

You can use adjacent sibling combinators in conjunction with the :first-child pseudo-class, repeating the combinators as many times as you need to reach a certain nth child. This is also mentioned in an answer to a different question.

For any element E, start with E:first-child, then add + E for subsequent children until you reach the element that you’re targeting. You don’t have to use the same element E, of course; you could switch that out for any type, class, ID, etc, but the important bits are the :first-child and + signs.

As an example, to get the third li of its ol, the following CSS3 selector:

ol > li:nth-child(3)

Would be replicated in CSS2 like so:

ol > li:first-child + li + li

An 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>

Note that since there are no sibling combinators that look at preceding siblings (neither in CSS2 nor CSS3), you cannot emulate :nth-last-child() or :last-child using CSS2 selectors.

Additionally, you can only emulate :nth-child(b) for one specific child at a time, where b is a constant number in the formula an+b (as described in the spec); you can’t achieve any complex formulas with adjacent sibling combinators alone.

More Related Contents:

  1. Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
  2. Is there a CSS selector for text nodes?
  3. How do I select the “last child” with a specific class name in CSS? [duplicate]
  4. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  5. Can the :not() pseudo-class have multiple arguments?
  6. How to combine class and ID in CSS selector?
  7. :first-child not working as expected
  8. What is the difference between :first-child and :first-of-type?
  9. Does CSS have a :blur selector (pseudo-class)?
  10. Specify multiple attribute selectors in CSS
  11. Should I use single or double colon notation for pseudo-elements?
  12. How to make Internet Explorer 8 to support nth child() CSS element?
  13. What does a[href^=”…”] do in CSS?
  14. Universal selector * and pseudo elements
  15. Browser support for CSS :first-child and :last-child
  16. CSS Specificity and Inheritance
  17. The use of /deep/ and >>> in Angular 2
  18. Zebra striping a table with hidden rows using CSS3?
  19. Vertically centering content of :before/:after pseudo-elements
  20. Difference between the selectors div + p (plus) and div ~ p (tilde)
  21. Are CSS selectors case-sensitive?
  22. What does .container.\31 25\25 mean in CSS?
  23. CSS combinator precedence?
  24. What is caret symbol ^ used for in css when selecting elements?
  25. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  26. CSS specificity or inheritance?
  27. How to skip first child?
  28. How to select all elements whose ID starts and ends with specific strings?
  29. selector for nth nested elements
  30. Latest on CSS parent selector [duplicate]

Leave a Comment