Subscribe

Close

Thank you for visiting!

Please consider subscribing to the RSS feed or following me on Twitter.

Repeat Every 6th Element Pattern With nth-child

Let's say you've got a set of elements where you want to match a pattern and give every other three a different style, illustrated like this:

Repeat every 6th pattern

Enter CSS3's nth-child. Repeat every 6th element pattern, like this:

li:nth-child(6n+4),
li:nth-child(6n+5),
li:nth-child(6n+6) {
    background-color:#f0f3f5;
}

To the top