Nth-child() selector alternative solution in CSS

Question

So we want to access -n+3 li elements in a list (if there are different types of elements before the li elements we want to access is a detail we do not care about) and I used the following way:

<html>
    <body>

        <style>
            li:nth-child(-n+3) {
                background: #ff0000;
            }
        </style>

        <p>An unordered list:</p>

        <ul>
            <h1>heading</h1>
            <li>coffee</li>
            <li>tea</li>
            <li>water</li>
            <li>coca-cola</li>
            <li>sprite</li>
            <li>orange juice</li>
            <li>beer</li>
        </ul>

    </body>
</html>

And it works fine, however in Explorer 8 and earlier versions, nth-child() selector is not supported. So how can we access the -n+3 li elements without using the pseudo class nth-child()?

Thats not the point, the point is to find another way to access the specific li elements without the usage of nth-child(). I wrote that to avoid the question about which browser i am using. Lets just say i am using explorer 8 for educational reasons :) — Aggelos Sfakianos, Apr 13 '16 at 11:11
You shouldn't use tags other than `li` as a direct child of `ul`: [documentation](https://www.w3.org/TR/html401/struct/lists.html#h-10.2). HTML validator will mark this as invalid. — prompteus, Apr 13 '16 at 11:26

score 8 · Accepted Answer · edited May 23 '17 at 11:59

You can use the :first-child and adjacent sibling selector. They work from IE7+.

Notes:

You shouldn't be using h1 tag as a direct child of any ul. But if that's how your structure is and you can't modify it then you can use :first-child + li, :first-child + li + li.
:nth-child(-n+3) generally would select the first 3 children of a parent. In your demo, since the first child is a h1 and since you've also attached the element type (li) to the nth-child(-n+3) the h1 doesn't get selected and only the two li that follow it are selected. The selector that I've mentioned in Note 1 will do the same (that is, it will select the first two li that follow the first child - which is, the h1 tag - irrespective of how many children the ul has).

Demo 1: (without any other tag directly inside ul)

li:first-child,
li:first-child + li {
  color: red;
}

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
  <li>and so on..</li>
</ul>

Demo 2: (with your structure)

ul :first-child + li,
ul :first-child + li + li {
  color: red;
}

li:nth-child(-n+3){
  background: beige;
}

<p>An unordered list:</p>
<ul>
  <h1>heading</h1>
  <li>coffee</li>
  <li>tea</li>
  <li>water</li>
  <li>coca-cola</li>
  <li>sprite</li>
  <li>orange juice</li>
  <li>beer</li>
</ul>

But one more thing, is -n+3 always gonna choose the first 2 li elements regardless of how many we have? Cauze if not then your answer is correct but only for the above example. Tell me if I got something wrong — Aggelos Sfakianos, Apr 13 '16 at 11:17
@AggelosSfakianos: Your understanding is not fully correct on the `:nth-child(-n+3)`. That selector selects the first 3 children of the parent but since you've attached the element type `li` to it and since the first element is not a `li`, it doesn't select the first child. The snippet (second) in my answer will do the same thing :) It selects the first and second `li` elements which are the siblings of the first child of the parent (which is the `h1`). — Harry, Apr 13 '16 at 11:21

Nth-child() selector alternative solution in CSS

1 Answers1