Home

Using the nth-child:(...) selector

The nth-child(...) selector is used to set attributes for various occurencies of elements

eg. nth-child(even) will target the 2nd, 4th, 6th etc occurence of the element.
nth-child(odd) will target the 1st, 3rd, 5th etc occurence of the element.
nth-child(4) will target the 4th occurence of the element.
nth-child(3n+0) will target every 3rd occurence of the element. Starting at line 0
nth-child(3n+4) will target every 3rd occurence of the element. Starting at line 4


It can be used with different elements, for example
<p>
<div>
<tr>
<section>


For Example...in the <style>> section of your page you could say...
p:nth-child(even) {background-color:yellow;}
and every other paragraph <p> will have a yellow background.

p:nth-child(3n+0) {font-size:2em;}
and every 3rd paragraph <p> will have double-sized text.

NOTE...
I had to put a <div> </div> around the paragraphs otherwise it targeted
the wrong ones - or at least counted wrong for some reason.

This is the second paragraph

This is the third paragraph

This is the fourth paragraph

This is the fifth paragraph

This is the sixth paragraph

This is the seventh paragraph

This is the eighth paragraph

This is the ninth paragraph