Hey, helft doch mal einem Bruder weiter 🤪

Kurzum geht's um das eigenwillige (wenngleich irgendwie nachvollziehbare) Verhalten von nth-of-type, respektive nth-child.

Die pflücken sich in meinem Fall den type mit einer gewissen Klasse, zählen also nicht nur alle Elemente, die diese Klasse aufweisen, sondern beziehen sich auf alle derartigen Elemente selbst. Zur Verdeutlichung (m)ein Beispiel:

.betreffende-klasse:nth-child(2) {
  color: yellow;
}
.betreffende-klasse:nth-of-type(3) {
  color: red;
}

<p class="ganz-andere-klasse">
  Ich werde nicht betroffen, werde aber unfreiwillig mitgezählt (anscheinend weil ich auf vom Element p bzw. Paragraph bin).
</p>
<p class="betreffende-klasse">
  Ich bin gelb, obwohl ich das ERSTE Element meiner Klasse bin.
</p>
<p class="betreffende-klasse">
  Ich bin rot, obwohl ich das ZWEITE Element meiner Klasse bin.
</p>
<p class="betreffende-klasse">
  Ich SOLLTE rot sein, da ich das DRITTE Element meiner Klasse bin.
</p>

Lässt sich das irgendwie elegant lösen? Oder muss ich meine Elemente umständlich umbenennen à la

<p class="betreffende-klasse erstes-element">
  …
</p>

Best practices anyone?

Es dankt euch recht, der Dr. Specht.