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

[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