Nth-of-type does not work on div

Question

I am confused with the nth-of-type selector.

I 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>

Run codeHide result

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

Now i'm stuck in 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>

Run codeHide result

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

but other styles of the parent div in the code work correctly, and styles i and b

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

Answer 1

, div 'foo' , . , , "foo".

AND,