nth-child reagiert nicht auf Klasse

Question

Ist es möglich, die nth-child Pseudo-Selektor, um mit einer bestimmten Klasse zu arbeiten?

Siehe dieses Beispiel: http://jsfiddle.net/fZGvH/

Ich möchte, dass das zweite DIV.red rot wird, aber es wendet die Farbe nicht wie erwartet an.

Und nicht nur das: Wenn Sie dies angeben, wird das 5. DIV rot:

div.red:nth-child(6)

Wenn Sie dies angeben, wird der 8. DIV in rot geändert:

div.red:nth-child(9)

Es scheint, dass eine DIV im Rückstand ist. Es gibt nur 8 DIV-Tags in dem Beispiel, so dass ich nicht weiß, warum nth-child(9) sogar funktioniert. Testen mit Firefox 3.6, aber in meinem tatsächlichen Produktionscode tritt das gleiche Problem in Chrome. Ich verstehe nicht, etwas darüber, wie dies angeblich zu arbeiten, würde Klärung zu schätzen wissen.

Außerdem wird dies die 6. DIV zu rot, aber was ich eigentlich will, ist für sie zu ändern, die zweite DIV.red zu rot:

div.red:nth-of-type(6)

Und ich verstehe nicht, warum nth-child() und nth-of-type() unterschiedlich reagieren, da es nur acht Tags desselben Typs im Dokument gibt.

Answer 1

Es gibt keine Möglichkeit, in CSS nach Klassen zu filtern, denn es gibt keine :nth-of-class() Selektor. Eine Möglichkeit, dies zu umgehen, besteht darin, die beiden unterschiedlichen Arten von div s in ihre eigenen Gruppen einteilen und dann auf der Grundlage dieser Gruppen auswählen. Zum Beispiel:

<div class="orange">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="red">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Mit diesem Selektor:

div.red div:nth-child(2) {
    background: red;
}

---

Was den letzten Teil Ihrer Frage betrifft:

Und ich verstehe nicht, warum nth-child() und nth-of-type() unterschiedlich reagieren, da es nur acht Tags desselben Typs im Dokument gibt.

Für den Code, den Sie dort angeben sollte nicht ein Unterschied sein. Ich habe es getestet, und die beiden Pseudo-Klassen funktionieren wie erwartet. Aber, im Allgemeinen:

:nth-child() arbeitet auf einer ganzen Ebene von Geschwistern ohne Rücksicht auf andere einfache Selektoren. Wenn dann das n-te Kind nicht zu dem gehört, was von den einfachen Selektoren gefunden wird, wird nichts gefunden.

:nth-of-type() arbeitet auf einer Ebene von Geschwistern des angegebenen Typs ohne Rücksicht auf andere einfache Selektoren. Wenn dann das n-te Element dieses Typs nicht unter den von den einfachen Selektoren übereinstimmenden Elementen ist, wird nichts übereinstimmend gefunden.

Answer 2

Sie können den allgemeinen Geschwisterkombinator verwenden:

div,
div.red ~ div.red ~ div.red {
  background: gray;
}
div.red ~ div.red {
  background: red;
}

Es ist zwar langatmig und Sie müssen die Stile wieder zurücksetzen, aber es könnte in einigen speziellen Situationen nützlich sein.

Es könnte mit einem CSS-Präprozessor automatisiert werden, und wenn ich gzip richtig verstehe, da die CSS-Ausgabe ist nur die Wiederholung des gleichen Textes die gziped Dateigröße sollte nicht furchtbar groß sein, es sei denn, Sie verwenden es eine Menge.

Answer 3

Es gibt eine einfachere Lösung, die ich gefunden habe, um mit meinen divs ohne spezielle Codezeilen zu arbeiten.

.red div:nth-child(6) {background-color:#ccc;}
.red div:nth-child(9) {background-color:#eee;}

funktioniert auch ohne das vorangestellte div gut.