nth-child nth-of-type mit Klasse verknüpfen ...?

[Dr. Specht]

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.

[MudGuard]

Hi,

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.

Natürlich. Wie sollte es sonst sein?

Es gibt wohl sowas wie

nth-child(An+B of selector)

also bei Dir nth-child(2 of .betreffende-klasse)

das wohl in Safari funktioniert. Inwieweit das in anderen Browsern schon umgesetzt ist, hab ich jetzt auf die Schnelle nix gefunden.

Ob's die Variante mit dem of auch bei nth-of-type gibt, ist mir auch unbekannt.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Andreas,

hab ich doch im Mai drüber gebloggert 😀

caniuse zeigt seit März 2023 leuchtendes Grün.

Rolf

[Dr. Specht]

Hallo Andreas,

hab ich doch im Mai drüber gebloggert 😀

caniuse zeigt seit März 2023 leuchtendes Grün.

Rolf

Echt lesenswerter Beitrag! 👍

...fürchte nur, seit x/2023 ist noch ein wenig ..."riskant" für Anwendung in production.

...daher meine (wie ich finde) wenig elegante Lösung

<p class="betreffende-klasse eins">
  Inhalt
</p>
<p class="betreffende-klasse zwei">
  Inhalt
</p>
<!--
...
-->

.eins {
  color: yellow;
}
.zwei {
  color: red;
}
/*
...
*/

Sollte hier irgendjemand einen besseren Best Practice in petto haben, immer nur raus damit 😆

Danke euch, tatsächlich recht, der Dr. Specht.

[Gunnar Bittersmann]

@@Dr. Specht

...fürchte nur, seit x/2023 ist noch ein wenig ..."riskant" für Anwendung in production.

Deine Furcht ist völlig unbegründet. Ein Dreivierteljahr ist eine Ewigkeit. Alle relevanten Browser unterstützen :nth-child(… of …).

Browser aktualisieren sich automatisch. Wer das ausgeschaltet, hat ganz andere Probleme als die Darstellung deiner Seite. Und was wäre so schlimm daran, wenn deine Seite in veralteten Browsern etwas anders aussähe?

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Wer das ausgeschaltet, hat ganz andere Probleme als die Darstellung deiner Seite.

Ja, z.B. einen Arbeitgeber, der unbedingt die Updatezyklen selbst steuern will und Stabilität vor Aktualität stellt. Der Firefox, den wir verwenden, ist die 102.15.1esr Version. Die ist zwar von September 2023, kennt aber natürlich die Features der 113-er Version nicht.

Rolf

[nix]

Ohne mir das jetzt groß anzusehen möchte ich da auf, relativ neu, “The of <selector> syntax” hinweisen.

[Gunnar Bittersmann]

@@nix

Ohne mir das jetzt groß anzusehen möchte ich da auf, relativ neu, “The of <selector> syntax” hinweisen.

Und aus welchem Grund tust du das 2 Wochen nachdem andere bereits darauf hingewiesen haben?

🖖 Живіть довго і процвітайте

[MudGuard]

Hi,

Und aus welchem Grund tust du das 2 Wochen nachdem andere bereits darauf hingewiesen haben?

Nix ist so schnell wie Licht. Oder auch nicht …

cu,
Andreas a/k/a MudGuard

[nix]

Muß man doch sein. Wenn man aus 2015 nach 1985 zurück kommt und noch nicht scheinbar die Zeitung gestohlen hat.