<!DOCTYPE HTML>
<style type="text/css">
   :nth-child(2){color:red;}
   :nth-of-type(2){color:green;}
   p:nth-child(2n){color:blue;}
   div:nth-of-type(2n+1){color:yellow;}
</style>
<div>
    <p>
        This should be yellow, as this will inherit property of div.
    </p>
    <p>
        This should be blue, as this is even child of type p.
    </p>
    <p>
        This should be yellow, as this will inherit property of div.
    </p>
    <div>
        This should be yellow, as it odd child of its own type.
    </div>
</div>
<div>
    This should be green, as this is 2nd child of its own type.
    <p>
        This should be green, as this will inherit property of div.
    </p>
    <p>
        This should be blue, as this is the even child of div.
    </p>
    <p>
        This should be green, as this is the odd child of its own type.
    </p>
    <p>
        This should be blue, as this is the even child of paragraph.
    </p>
</div>
<div>
    This should be yellow, as this odd child of its own type.
    <p>
        This should be yellow,as this inherit property of div.
    </p>
    <span>This should be red,as this is the second child of div </span>
    <span>This should be green, as this is the second child of its own type </span>
    <div>
        <span>This should be yellow,as this will inherit property of div i.e yellow as odd of its own type <i>and </i> <i>this should be green and italic </i></span>
    </div>
</div>