как исправить эту линию h1

Question

У меня есть этот код, но я не знаю, почему, когда я ставлю сверху (все еще в div), и код не работает, но когда я ставлю внизу, он работает. Вы можете мне это объяснить?

.pseudo6 {
  border: 2px solid black;
  margin-top: 30px;
  padding: 30px;
}

.pseudo6 p:first-child i {
  color: blue;
}

<div class="pseudo6">
  <h1>Match all 'i' elements in all first child 'p' elements</h1>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</div>

Answer 1

Кстати, Александр Ковпашко показывает, попробуйте это css:

.pseudo6 {
  border: 2px solid black;
  margin-top: 30px;
  padding: 30px;
}

.pseudo6 p:first-of-type i {
  color: blue;
}