Friday 24 January 2014

css :nth-child pseudo class

example

<div id="holder">
<h2>Heading</h2>
<div class="item">This is even</div>
<div class="item">This is odd</div>
</div>
.item:nth-child(even) {
   background-color:yellow;
}
result

Heading

this is even
this is odd
why?
:nth-child relates to all children of the parent element, not just those with class ".item", so this is saying every ".item" that is an even child of it's parent.
If you're using class selectors, easiest solution is to create a wrapper for the elements that you're targeting, as nth-of-type only works with elements selectors.