CODEWITHSUNDEEP
htmlcsscss-selectors
Craig Jonathan Kristensen
Craig Jonathan Kristensen

Reputation: 737

Changing the colour of every 5th div

I have a lot of divs after each other, 4 in each row. I'm using the nth-child selector to change the padding of every 4th div.

Now I want to change the rollover property every 5th time.

something like this:

.content_tab_hover:nth-child(5n+1){
    background: #ce1c5e;
}
.content_tab_hover:nth-child(5n+2){
    background: #009acf;
}
.content_tab_hover:nth-child(5n+3){
    background: #fcc712;
}
.content_tab_hover:nth-child(5n+4){
    background: #742f68;
}
.content_tab_hover:nth-child(5n+5){
    background: #389a28;
}

Fiddle: http://jsfiddle.net/craigzilla/TuRzD/

Any ideas where I'm going wrong?

Upvotes: 0

Views: 157

Answers (2)

Chris
Chris

Reputation: 3795

You need to change the selector. The nth-child should be on .content_tab:nth-child() .content_tab_hover instead of .content_tab_hover:nth-child()...

Try this:

.content_tab:nth-child(5n+1) .content_tab_hover{
    background: #ce1c5e;
}
.content_tab:nth-child(5n+2) .content_tab_hover{
    background: #009acf;
}
.content_tab:nth-child(5n+3) .content_tab_hover{
    background: #fcc712;
}
.content_tab:nth-child(5n+4) .content_tab_hover{
    background: #742f68;
}
.content_tab:nth-child(5n+5) .content_tab_hover{
    background: #389a28;
}

Updated jsfiddle: http://jsfiddle.net/TuRzD/6/

Upvotes: 2

nice ass
nice ass

Reputation: 16719

You're not targeting the correct DIV. It should be:

.content_tab:nth-child(5n+1) .content_tab_hover{
    background: #ce1c5e;
}
.content_tab:nth-child(5n+2) .content_tab_hover{
    background: #009acf;
}
.content_tab:nth-child(5n+3) .content_tab_hover{
    background: #fcc712;
}
.content_tab:nth-child(5n+4) .content_tab_hover{
    background: #742f68;
}
.content_tab:nth-child(5n+5) .content_tab_hover{
    background: #389a28;
}

.content_tab_hover:nth-child(n) selects the n-th .content_tab_hover element from each .overlay DIV.

Upvotes: 1

Related Questions