nth: дочерний селектор - разные парицы

Question

Так что у меня всегда было недоразумение с n-м ребенком и селекторами. Я пытался понять это, но после поиска я не смог найти ответ.

Это мой CSS

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

Это мой 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> 

В настоящее время этот CSS применяет синий цвет для обоих пунктов. Как мне его добавить только к первому? Я знаю, что если я поместил их в один и тот же div, он работает, но что, если он вложен несколько раз. Как выбрать только один?

Посмотрите на эту скрипку. http://jsfiddle.net/x9jkq0x3/

Answer 1

Вы можете сделать это, как этот 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

вы можете использовать first-child классу головы вместо класса привет это пример Fiddle