CSS3 nth-child does not work Chrome 9

Question

Hi everyone, I have this code:

<div class="sidebox"> <h3>Course Summary</h3> <div class="block"> <h4>Course ID</h4> <p>MS00000001</p> <h4>Start Date</h4> <p>14<sup>th</sup> September 2011</p> <h4>End Date</h4> <p>12<sup>th</sup> June 2012</p> <h4>Cost</h4> <p>£1500.95</p> </div> </div> 

now im trying to change the color of every second P tag

 .sidebox .block p:nth-child(odd) { color: red !important; } 

I tried using this, but it did not work: / nothing changes color, am I doing something wrong here?

Answer 1

As Matt Ball says, elements are 1-indexed instead of 0-indexing. Therefore, your p elements are even children, not weird ones, so they will not match. Another catch is that :nth-child() counts every sibling under that parent, regardless of type, so if you use p:nth-child(even) , every p is selected.

Use p:nth-of-type(even) instead, so non- p siblings (in this case, h4 elements) are excluded from the selection:

 .sidebox .block p:nth-of-type(even) { color: red !important; } 

JsFiddle example

Answer 2

There is no p element in your markup that is an odd child. CSS nth-child is 1-indexed.

The index of the first child of the item is 1.

A source