nth-of-type not working on div

Question

I'm confused with nth-of-type selector.

I have tried this snippet

.red:nth-of-type(1){
  color:red;
}

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <div class="red">fourth</div>
</div>

It gets both p and div with class red and changes its color

Now i'm stuck with this example

section .foo:nth-of-type(1){
  background:red;
}

.parent .foo:nth-of-type(1){
  background:red;
  }

<section>

  <p class="foo">Little</p>
  <p>Piggy</p>
  <div>...</div>
  <div class="foo">border...</div>
</section>

<div class="parent">
  <i class="foo">1</i>
  <i>x</i>
  <i class="foo">2</i>
  <b class="foo">3</b><b>x</b><b class="foo">4</b>
</div>

I was expecting both p and div in the section with class foo to get red background but it does not work, it works well when div is replaced with span

but,other styles to parent div in the code works correctly and styles i and b

I know this is a duplicate of CSS selector for first element with class

Answer 1

It is because the div with class 'foo' is not the first child of that type, it is the second. The selector will only match elements that are the first of there type and have the class 'foo'.

It doesn't match the first of that type AND class like you are expecting