die n-te folgenden Wählen Geschwister

Question

Ich fragte mich, ob es eine bessere Lösung als zu dem, was ich fand, ohne die HTML-Struktur zu verändern

Die HTML-Struktur wie dieser So

<div class="wrap"> 
    <div class="divider"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="divider"></div> 
</div> 

sieht es verschiedene DIVs auf dem auf der gleichen Ebene, was ich tun möchte, ist jeden vierten Block anders zu färben, bis ein Teiler erscheint, dann müsste er neu erzählen.

Ich dachte, etwas wie .block:nth-child(4n) würde den Trick tun, aber es zählt tatsächlich die Elemente basierend auf dem übergeordneten, nicht auf der Klasse basiert.

Hier ist die JSFiddle zum ausprobieren. Block # 4 und # 8 in jeder Reihe unterschiedlich gefärbt http://jsfiddle.net/SKgdH/3/

werden sollen, und das ist, wie ich es Art-Arbeit gemacht: http://jsfiddle.net/SKgdH/1/

Was ich tat, war für den 4. Geschwister von der aussehen .divider wie diese .divider + .block + .block + .block + .block

Es funktioniert, aber ich müsste das gleiche für den 8., 12., 16., .. Block schreiben, der es nicht mehr automatisch macht.

Gibt es etwas wie .divider + .block:nth-sibling(4) oder .divider + .block:nth-of-class(4)?

Vielleicht hat einer von euch eine Idee, wie man das löst, ohne den Quellcode zu ändern oder Javascript zu verwenden.

Answer 1

Eine solche Pseudo-Klasse würde nicht funktionieren, weil Sie erwarten, dass Elemente mit einem anderen Compound-Selektor übereinstimmen, was nicht so einfach ist. Zum Beispiel schrieben, wenn Sie eine komplexe Selektor, der nur mit der pseudo-Klasse einen einzigen Verbindung Wähler hatte (und keine Geschwister combinators):

.block:nth-sibling(4n) 

Würden Sie erwarten, dass dies überhaupt .block:nth-child(4n), Spiel nichts passen, oder seine ungültig?

Es wäre schön, in der Lage zu sein, + .block + .block + .block + .block zu kürzen und irgendwie wiederholen, aber leider aufgrund der wie die Selektor-Syntax entworfen ist, ist es einfach nicht möglich.

Sie müssen stattdessen JavaScript und/oder zusätzliche Klassen zu den entsprechenden Elementen hinzufügen.

Answer 2

Wie von BoltClock erklärt, können Sie dies ohne JavaScript nicht tun.

var counter = 0; 
$('.wrap > div').each(function() { 
    if ($(this).hasClass('divider')) { 
     counter = 0; 
    } 
    else if ($(this).hasClass('block')) { 
     counter++; 
     if (counter % 8 == 4) { 
      $(this).css('background-color','#ff0'); 
     } 
    } 
}); 

, dass die vierte Spalte Farbe Gelb in jeder Zeile: Wenn Sie diesen Weg wählen (auch wenn Sie explizit sagen, ohne JavaScript), kann es mit jQuery wie dies getan werden.

Answer 3

Die hier Problem ist, dass :nth-of-type zu die Art des Elements bezieht sich und beide .divider und .block sind Elemente vom Typ <div>.

Was Sie wirklich brauchen, ist für .divider eine andere Art von Element von .block.

---

Auf dieser Grundlage, wenn die beiden einzigen Kind Elemente <div class="wrap"> sind:

1. <div class="divider">
2. <div class="block">

ich versucht sein würde <div class="divider"> für <hr> zu tauschen - die thematische Pause Element.

Dazu können Verwendung:

.wrap div:nth-of-type(4) 

zu Stil .block.