How to change the background color of nth div

Question

I need to change the background color of 1st, every 4th & every 5th div with class cover-inner

I tried following but it is not working

.cover-wrapper .cover-inner:nth-of-type(4n+4) {
    background-color: yellow;
}
.cover-wrapper .cover-inner:nth-of-type(4n+5) {
     background-color: orange;
}

Actual fiddle http://jsfiddle.net/gfLPG/1/

Answer 1

Put nth-of-type() on .cover-wrapper :

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

As every .cover-inner is the only child of its parent, you will never catch'em.

---

Side notes:

• Use :nth-of-type(4n) instead of :nth-of-type(4n+4)
• Use :nth-of-type(5n) if you want to change color of every 5th elements (currently, you're changing the color of every 4th+1 element)
• Use :nth-of-type(1) or :first-of-type() to target the first element

Answer 2

Try it :-

.cover-wrapper:nth-of-type(4n+4) .cover-inner {
    background-color: yellow;
}
.cover-wrapper:nth-of-type(4n+5) .cover-inner {
     background-color: orange;
}

DEMO