title: Nth-child() selector alternative solution in CSS
body: <p>So we want to access <strong>-n+3</strong> <code>li</code> elements in a list (if there are different types of elements before the <code>li</code> elements we want to access is a detail we do not care about) and I used the following way:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
  
          &lt;style&gt;
              li:nth-child(-n+3) {
                  background: #ff0000;
              }
          &lt;/style&gt;
  
          &lt;p&gt;An unordered list:&lt;/p&gt;
  
          &lt;ul&gt;
              &lt;h1&gt;heading&lt;/h1&gt;
              &lt;li&gt;coffee&lt;/li&gt;
              &lt;li&gt;tea&lt;/li&gt;
              &lt;li&gt;water&lt;/li&gt;
              &lt;li&gt;coca-cola&lt;/li&gt;
              &lt;li&gt;sprite&lt;/li&gt;
              &lt;li&gt;orange juice&lt;/li&gt;
              &lt;li&gt;beer&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And it works fine, however in Explorer 8 and earlier versions, <code>nth-child()</code> selector is not supported. So how can we access the <strong>-n+3</strong> <code>li</code> elements without using the pseudo class <code>nth-child()</code>?</p>