<section>
  <p>First child - I won't be red</p>
  <div>Second-child - I won't be red</div>
</section>
<hr>
<section>
  <div>First child - I will be red</div>
  <div>Second-child - I won't be red</div>
</section>
<hr>
<section class="test3">
  <p>First child - I won't be red or green</p>
  <div>Second-child - I will be green because I am first of type div</div>
</section
p {
  margin: 0;
}
div:nth-child(1) {
  background: red;
}
.test3 div:nth-of-type(1) {
  background: green;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.