CSS3 nth-child doesnt work Chrome 9

Question

hey all, 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 colour of every second P tag

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

i tried using that but it didnt work :/ nothing changes colour, am i doing something wrong here?

Answer 1

As Matt Ball says, elements are 1-indexed instead of 0-indexed. Therefore your p elements are even children, not odd, so they won't be matched at all. Another catch is that :nth-child() takes into account every sibling under that parent, no matter the type, so if you use p:nth-child(even), every p gets 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;
}

Sample on jsFiddle