nth:child selector - different parrents

Question

So i've always had some misunderstanding with nth child and selectors. I have been trying to figure it out but after searching I could not find the answer.

This is my css

p.hi:nth-of-type(1) {
     color: blue;
} 

This is my html

<div class"head">
    <p class="hi">This is some text.</p>
</div>

<div class"head">
    <p class="hi">This is some text.</p>
</div>

Currently this css is applying the color blue to both paragraphs. How do I make it only add it to the first? I know that if i put them both in the same div it works but what if it is nested several times. How do i select only one?

Take a look at this fiddle. http://jsfiddle.net/x9jkq0x3/

Answer 1

You can do it like this Fiddle

div:nth-of-type(1) p.hi {
    color: blue;
} 

<div class="head">
    <p class="hi">This is some text.</p>
</div>

<div class="head">
    <p class="hi">This is some text.</p>
</div>

Answer 2

you can use first-child to class head instead class hi this is the example Fiddle