◆ nth-of-type は マッチした要素の N 番目というセレクタではありません
◆ nth-child では 兄弟要素の N 番目だったのが p や span などのタグの種類ごとに数えられるようになったものです
  ◆ div:nth-of-type(2) だと 2 番目の div
  ◆ .active:nth-of-type(2) だといずれかのタグの 2 番目で active クラスを持つもの 
わかりやすく説明しているところがなくて これまで ○○:nth-of-type(1) と書くと ○○ に一致するものの中で一番最初のものになると思っていました

ですが 実際は div や p などのタグの種類ごとに N 番目の要素となります
<style>
.active:nth-child(1):before {content: "nth-child(1)";color: red;}
.active:nth-of-type(1):after {content: "nth-of-type(1)";color: blue;}
</style>

<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>

<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<br>
<div>
<span class="active">(span)</span>
<p class="active">(p)</p>
<em class="active">(em)</em>
</div>

(span)

(p)

(em)

.active:nth-child(1) と .active:nth-of-type(1) に before after を使って 赤と青で文字を表示しました

一番上の ul では ひとつめの要素で active クラスがついているのでどちらもついています
2つめの ul では 2 つめの li が一番最初の active クラスですが どちらもついていません

最後の div では それぞれ別の要素なので全部に nth-of-type(1) がマッチしています
p:nth-of-type(3) みたいな例が多いので マッチしたものの中で N 番目と思ってしまいがちですが 実際はタグの種類ごとに数えられています

「active クラスがついている最初の要素」 というのは css では無理そうです
jQuery と違い :not で 「li.active:not(.active~.active)」 のような使い方はできないですし