javascript - CSS nth-of-type not selecting in order -


i use jquery add different classes repeating div it's not working expected… here's javascript:

$('div.cake:nth-of-type(1n)').css('border-bottom', '3px solid red'); $('div.cake:nth-of-type(2n)').css('border-bottom', '3px solid blue'); $('div.cake:nth-of-type(3n)').css('border-bottom', '3px solid green'); $('div.cake:nth-of-type(4n)').css('border-bottom', '3px solid yellow'); 

and html:

<section id="menu">      <h1>title</h1>     <p>texty text lorem ipsum blah blah</p>      <div class="cake">         <a href="#"><img src="http://lorempixel.com/400/400/food/1/" />         <span class="caption">image 1 here</span></a>     </div>      <div class="cake">         <a href="#"><img src="http://lorempixel.com/400/400/food/2/" />         <span class="caption">image 2 here</span></a>     </div>      <div class="cake">         <a href="#"><img src="http://lorempixel.com/400/400/food/3/" />         <span class="caption">image 3 here</span></a>     </div>      <!-- , on... -->  </section> 

i expect first div have border on bottom in red, second div in blue, third in green, fourth in yellow, red, blue, green, yellow, etc., doesn't quite work out. here's fiddle: http://jsfiddle.net/7blz3/

what doing wrong?

you need use offsets:

$('div.cake:nth-of-type(4n+1)').css('border-bottom', '3px solid red'); $('div.cake:nth-of-type(4n+2)').css('border-bottom', '3px solid blue'); $('div.cake:nth-of-type(4n+3)').css('border-bottom', '3px solid green'); $('div.cake:nth-of-type(4n+4)').css('border-bottom', '3px solid yellow'); 

the reason e.g. after setting 2n 4th item set well... 4n overwrite , naturally doesn't work properly. not mention 1n set them , 3n set items 3 , 6 , overwrite 3rd instance of 2n.


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -