CSS: Target ONLY first child-element in parent - first-of-type not working

Question

I want to target the first p only in #page-content. But all first p in all subclasses are targeted - see following code-example. How can I avoid this? Thanks in advance!!!

#page-content p:first-of-type {
color: red;
}

<div id="page-content">
  <div id="summary">
    <p>Some summary (SHOULD NOT BE TARGETED)</p>
  </div>
  <p>The first paragraph, ONLY THIS should be targeted.</p>
  <p>The second, show me!</p>
  <div class="someclass">
    <p>1st paragraph in .someclass (SHOULD NOT BE TARGETED)</p>
    <p>2nd paragraph in .someclass</p>
  </div>
</div>

Answer 1

Look for immediate descendants using the ">" selector

#page-content > p:first-of-type {
color: red;
}

<div id="page-content">
  <div id="summary">
    <p>Some summary (SHOULD NOT BE TARGETED)</p>
  </div>
  <p>The first paragraph, ONLY THIS should be targeted.</p>
  <p>The second, show me!</p>
  <div class="someclass">
    <p>1st paragraph in .someclass (SHOULD NOT BE TARGETED)</p>
    <p>2nd paragraph in .someclass</p>
  </div>
</div>