Tests für nth-child und nth-of-type

Es wird im folgenden immer die gleiche Struktur angegeben:

<div id="zahl">
    <p></p>
    <div></div>
    <p></p>
    <p></p>
    <blockquote></blockquote>
    <p></p>
    <div></div>
    <p></p>
    <p></p>
    <p></p>
</div>

Alle Elemente sind im default gleich formatiert – als schwarz umrandetes Blockelement. Bei der Selektoren gibt's eine Hintergrundfarbe.

(Und das verkackte Zählen und Erklären übernimmt ein Skript.)

#eins > *:nth-child(odd)

… selektiert jedes ungerade Element, egal welchen Typ es ist.

#zwei > p:nth-child(odd)

… selektiert jedes ungerade Element, aber nur wenn es vom Typ <p> ist.

#drei > *:nth-of-type(odd)

… selektiert jedes ungerade Element, aber nur wenn es vom gleichen Typ ist. Es existieren also Zählungen für alle Element-Typen, eine Zählung für <p>, eine für <div> und eine für <blockquote>

#vier > p:nth-of-type(odd)

… selektiert jedes ungerade <p>-Element. Es zählt also nur die <p>s.