CODEWITHSUNDEEP
jquerycsscss-selectors
Dean Elliott
Dean Elliott

Reputation: 729

nth child. Target every 4th/5th, 9th/10th, 14th/15th element

I'm creating a little blog layout and I want every 4th and 5th, 10th and 11th, 14th and 15th, etc. post to have a different class.

So basically there'll be 3 regular posts, then 2 with this new class, 3 more regular, 2 with new class, etc.

:nth-child perplexes me, so could anyone point me in the right direction?

Upvotes: 1

Views: 1783

Answers (2)

Philip G
Philip G

Reputation: 4104

You could also do this with pure css: 

ul li:nth-child(5n),ul li:nth-child(5n-1){
   color: red;
}

HTML: 

 <ul>
     <li>List elements</li>
 </ul>

fiddle http://jsfiddle.net/wkxtL/2/

EDIT: Sorry, didn't read the question. This doesn't change teir class, just their apperence

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

You can use nth-child selector, you are selecting 5n - 1 and 5n elements

$('ul').children(':nth-child(5n-1), :nth-child(5n)').append('text')

Demo: Fiddle

Upvotes: 6

Related Questions