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/']
Use

```
ul li:nth-child(-n+4)

```

for the first four, and

```
ul li:nth-last-child(-n+4)

```

for the last four.
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;
}

```