Style all elements except the last four

Question

So I'd like to apply a style to all elements with the class thumbnail, except the last four.

This is my code so far.

.thumbnail:nth-child(){...}

Something goes in the nth-child() function but I can't figure out what it is.

Answer 1

http://jsfiddle.net/sC2L5/

<style type="text/css">
.thumbnail {
    width:100px;
    height:20px;
    margin:10px;
    background-color:orange;
}

/* all the magic happens here*/
.thumbnail:nth-last-child(-n+4) {
    background-color:red;
}

</style>


<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>

Answer 2

You can as well select the fith from last one and style any behind it : DEMO

 .thumbnail:nth-last-child(5)~.thumbnail {
    background-color:red;
}

Answer 3

.thumbnail:not(:nth-last-child(-n + 4)) {
    /* .. */
}

But if you're trying to use :nth-child() to style children with a certain class, it won't work.

The :nth-child() pseudo class only styles children within a parent. It knows nothing about an elements class attribute.

Answer 4

.thumbnail:nth-last-child(-n+4) { background-color:red; }

its working 100%