I Have a simple unordered list containing over 12 li's. 

```
<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

```

I want to target the first four li's to change their background, and the last four li's to create a different background. Is there any way to do this only with CSS? I know how to use pseudo classes for targeting the first, or the last li, or every forth element, but what I want is to target all first-four, and last-four elements.
['https://Stackoverflow.com/questions/16853778', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2335523/']
Using `nth-child` is the best practice. 

```
li:nth-child(-n+4) {
   background-color:gren;   
}

```

But you **won't get full browser compatibility.** especially in lower versions of **IE**
If you are using static html, you can create a class and and apply to the first four `li`

eg: 

```
.special{
    background-color:gren;
    }

<ul>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

```
You can user **nth-child** and **nth-last-of-type**.

So the CSS code will be :

```
ul li:nth-child(-n+4) {
    background: red;
}

ul li:nth-last-of-type(-n+4) {
    background: blue;
}

```