:first-of-type

/* Selects the first <p> to appear inside a parent element
   regardless of its position inside the siblings */
p:first-of-type {
  color: red;
}

:first-of-type

<h2>Heading</h2>

<p>Paragraph</p>

<p>Paragraph</p>

p:first-of-type {
  color: red;
}

<div>
  <span>This `span` is first!</span>
  <span>But this `span` isn't.</span>
  <span>This <em>nested `em` is</em>!</span>
  <span>And so is this <span>nested `span`</span>!</span>
  <b>This `b` qualifies!</b>
  <span>This final `span` does not.</span>
</div>

div :first-of-type {
  background-color: lime;
}