CODEWITHSUNDEEP
csscss-selectors
Phill
Phill

Reputation: 546

CSS3: How to select every 4th and 5th element

I'm new to these selectors and I was wondering how I would go about doing such a thing.

My selector needs to select the 4th and 5th elements, but then it needs to keep doing so. So it'd need to select 4, 5, 9, 10, 14, 15 and so on.

How is this possible? At the moment I can select every third item like so:

.pure-g-r .pure-u-1-3:nth-child(3n+3)

But I'm not sure how I can translate that into what I need.

Thanks for any help.

Upvotes: 8

Views: 4445

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

a little nth-child tester page: http://css-tricks.com/examples/nth-child-tester/

.pure-u-1-3:nth-child(5n + 4), .pure-u-1-3:nth-child(5n){
    color:red;
}

http://css-tricks.com/useful-nth-child-recipies/

http://css-tricks.com/how-nth-child-works/

Upvotes: 1

Itay
Itay

Reputation: 16777

You actually want to select every couple from the 4th and 5th element, with jumps of 5.

So, just use the following two comma-separated selectors.

.pure-g-r .pure-u-1-3:nth-child(5n + 4), .pure-g-r .pure-u-1-3:nth-child(5n)

jsFiddle Demo

Result

Upvotes: 11

Related Questions