css3 img odd & even child

Question

I want to target the images and give the odd occurrence different rotation compare to even ones and I am using the following html and css but it does not work. Can anyone let me know what am I missing here:

<div id="blocks" style="overflow-y: scroll; height: 200px; padding: 20px 0 0 20px;">

<div style="height: 150px"><p><img src="mike.jpg" align="left" class="students">
<font color="red">Mike</font>"hello from UK." 
</p></div>


<div style="height: 150px"><p><img src="jack.jpg" align="left" class="students">
<font color="red">Jack</font> 
"Hello from US"
</p></div>

</div>

And the CSS:

#blocks img:nth-child(even) {

transform:rotate(5deg);

}
#blocks img:nth-child(odd) {

transform:rotate(5deg);

}

Answer 1

Use something like this instead:

#blocks div:nth-child(even) img {
    /* styling */
}

#blocks div:nth-child(odd) img {
    /* styling */
}

jsFiddle example

The reason this works, is because we are targeting the (even/odd) div elements, as opposed the img elements. The reason :nth-child wasn't working on the img elements was because they weren't siblings, unlike the div elements.