":nth-child()" und ":nth-type-of()" - Unterschied

[nemoinho]

hallo alle zusammen,

eine kleine Frage, worin unterscheiden sich die pseudo-Klassen ":nth-child()" und ":nth-of-type()" eigentlich genau?

Meine Frage ergibt sich daraus, dass ich in verschiedenen Testfällen stets das selbe Ergebnis erhielt und auch bei google nicht so genaue antworten fand.
Das beste suchergebnis beschrieb die beiden pseudo-Klassen gleich, mit der Ausnahme, dass nth-of-type nicht auf die Kindelemente des Selektors anwendbar sei, sondern auf den Selektor selbst.

Für eine hilfreiche Antwort wäre ich dankbar, am besten mit einem kurzen Beispiel, wo der unterschied zu Tage tritt.

mfG nemoinho

[ChrisB]

Hi,

eine kleine Frage, worin unterscheiden sich die pseudo-Klassen ":nth-child()" und ":nth-of-type()" eigentlich genau?

Schauen wir uns erst mal die Definition der Selektoren an,
:nth-child() pseudo-class:

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for a given positive integer or zero value of n, and has a parent element. In other words, this matches the bth child of an element after all the children have been split into groups of a elements each.

:nth-of-type() pseudo-class:

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for a given zero or positive integer value of n, and has a parent element. In other words, this matches the bth child of that type after all the children of that type have been split into groups of a elements each.

Der Hauptunterschied liegt also in

"an element that has an+b-1 siblings before it in the document tree"

vs.

"an element that has an+b-1 siblings with the same expanded element name before it in the document tree"

Ein Beispiel macht das ganze vielleicht deutlicher:
Übersetzen wir mal "child" sehr wörtlich mit Kind; und nehmen wir mal an, als "Typen" ("expanded element name") gebe es Söhne und Töchter.
Ob du nun "das dritte Kind deines Vaters" oder "der dritte Sohn deines Vaters" bist, das kann sehr wohl einen Unterschied bedeuten - nämlich abhängig davon, ob du noch Schwestern hast, die vor dir geboren wurden, oder nicht.
Nur wenn dein Vater es irgendwie hingekriegt haben sollte, zumindest bis einschliesslich zu dir nur männliche Nachkommen gezeugt zu haben - dann ist es Wurscht, dann bist du sowohl das n-te Kind als auch der n-te Sohn.

MfG ChrisB

[Tim Tepaße]

Hallo,

Meine Frage ergibt sich daraus, dass ich in verschiedenen Testfällen stets das selbe Ergebnis erhielt [...]

Könnte das sein, dass Deine Testfälle jeweils keinen gemischten Inhalt hatten, wie z.B. eine Geschwisterschaft von <p>, <img>, <blockquote>, <table> und anderen Blockelementen, die vorkommen können, wenn man komplexere Artikel schreibt? Dann ist das nämlich hilfreich – ach ich sehe gerade, dass ChrisB mal wieder vorgesprintet ist.

Für eine hilfreiche Antwort wäre ich dankbar, am besten mit einem kurzen Beispiel, wo der unterschied zu Tage tritt.

Dann einfach hier ein Ausführlicheres, durchkommentiertes Beispiel. ;)

Tim

[Kai345]

[latex]Mae  govannen![/latex]

Dann einfach hier ein Ausführlicheres, durchkommentiertes Beispiel. ;)

Schön. Aber Du solltest vielleich bei #eins dein Verständnis von gerade und ungerade ein wenig anpassen ;)

Cü,

Kai

[Tim Tepaße]

Hallo,

Schön. Aber Du solltest vielleich bei #eins dein Verständnis von gerade und ungerade ein wenig anpassen ;)

Ich sach Dir, dieses Durchzählen, dafür brauchts Konzentration!

(Ich hätte wirklich even nehmen sollen. Das „un“ von „ungerade“ und das „nicht“ von „nicht selektiert“ würden dann wenigstens harmonieren.)

Tim

[MudGuard]

Hi,

»» Schön. Aber Du solltest vielleich bei #eins dein Verständnis von gerade und ungerade ein wenig anpassen ;)
Ich sach Dir, dieses Durchzählen, dafür brauchts Konzentration!

Noch mehr Konzentration! "weil 2. und damit ungerades <p>" kommt noch mehrfach vor ;-)

cu,
Andreas

[nemoinho]

Hi nochmal,

und danke für das schöne Beispiel, nach sowas hatte ich schon gesucht, aber die meisten ergebnisse hatten nur kurz drauf hingewiesen, dass es diese neuen pseudo-Klassen gibt, aber nicht groß erläutert, wie sie denn genau funktionieren und in den Spezifikationen vom W3C hab ich das auch nicht so ganz verstanden gehabt, oder wohl überlesen.

Und, ja du hattest recht in meinen Testfällen hab ich das wirklich außer acht gelassen, ich werde das wohl mal anpassen, damit ich mich auch in zukunft noch dran erinner deine Seite ist schon bei den Lesezeichen ;-)

mfG nemoinho

[Tim Tepaße]

Hallo Andreas,

Noch mehr Konzentration!

Nach etwas konzentriertem Spaghetticode  überlasse ich jetzt das Zählen jemandem, der das kann.  ;)

Tim