<div> vs <nav> when selecting last-of-type by .class in a nested structure

I want to keep it simple. The idea is to select the last immediate child by a certain class in a nested structure. Why it works with <nav> tag but <div>?

With <div> tag:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.super > .sub:last-of-type {
  background-color: turquoise;
}

<!-- language: lang-html -->

<div class="super">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <div class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div>
    <div class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div>
    </div>
  </div>
</div>

<!-- end snippet -->

With <nav> tag:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.super > .sub:last-of-type {
  background-color: turquoise;
}

<!-- language: lang-html -->

<nav class="super">
  <div class="sub">1</div>
  <div class="sub">2</div>
  <nav class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div>
    <nav class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div>
    </nav>
  </nav>
</nav>

<!-- end snippet -->

So I have two questions here.

1. Why?
2. Could I even achieve the same <nav> behaviour with <div> tag?

I think the confusion you are having is that :last-of-type can be thought of as "last of tag" rather than "last of selector".

So, when you do .sub:last-of-type and you are using all DIVs, you are effectively saying "the last div which also has the class .sub". Let's look at your code again:

<div class="super">
  <div class="sub">1</div>
  <div class="sub">2</div> <!-- this is not the last DIV -->
  <div class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div> <!-- this is not the last DIV -->
    <div class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div> <!-- this IS the last DIV -->
    </div>
  </div>
</div>

In the above example, you have two DIVs which are not the last of type DIV, even thought they are the last of type with class .sub - that's not what the :last-of-type selector targets. It's confusing.

When you use nav, the .sub elements are indeed the last of type "DIV":

<nav class="super">
  <div class="sub">1</div>
  <div class="sub">2</div> <!-- this is the last of type DIV -->
  <nav class="super">
    <div class="sub">_1</div>
    <div class="sub">_2</div> <!-- this is the last of type DIV -->
    <nav class="super">
      <div class="sub">__1</div>
      <div class="sub">__2</div> <!-- this is the last of type DIV -->
    </nav>
  </nav>
</nav>

UPDATE (from comments): My suggestion would be to use any tag other than DIV for the .super elements as is done with the nav tags above. You can even create your own custom elements.

The OP eventually found a CSS-only solution which I am posting on their behest, though I personally find it hard to read and understand. It is a clever solution nonetheless:

.super > .sub:has(+ .super), 
.super > .sub:last-child { 
  background-color: turquoise; 
}