CSS-Auswahl: Wie zählt und wählt man nur das Kind einer bestimmten Klasse?

Question

den HTML Da in dem alle Gegenstände, wie auf dem gleichen Niveau sind:

<div class="h2">Title: Colors</div> 
<div class="pair">Hello world (1)</div> 
<div class="pair">Hello world (2)</div> 
<div class="pair">Hello world (3)</div> 
<div class="pair">Hello world (4)</div> 
<div class="pair">Hello world (5)</div> 
<div class="pair">Hello world (6)</div> 

<div class="h2">Title: Units</div> 
<div class="pair">Hello world (1)</div> 
<div class="pair">Hello world (2)</div> 
<div class="pair">Hello world (3)</div> 
<div class="pair">Hello world (4)</div> 
<div class="pair">Hello world (5)</div> 
<div class="pair">Hello world (6)</div> 

Wie wählen Sie die n + 3 und n + 4 .pair Elemente ausgehend von der vorherigen · H 2 Element?

So ist die 1 & 2 sind weiß, 3 & 4 sind rosa, 5 & 6 sind weiß, etc.

Ich versuchte .pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; } aber das Kind des Körpers zählen, wo die · H 2 sind auch Kind und brich so mein Gleichgewicht.

http://jsfiddle.net/zPYcy/2/

---

Edit: keine reine CSS Selektor gefunden wurde nach einem Muster benachbarte Elemente auszuwählen, wie .class- (n + 3). Alternativ eine unendliche Reihe von CSS-Selektoren wie div + .class + .class + .class ...; Umhüllung in einem Div zusammen mit :nth-child(n+3) oder :nth-of-type(n+3); oder JS wird benötigt. Sie kennen einen anderen Hack? Willkommen teilen!

Answer 1

Aus Langeweile und Neugier habe ich eine Funktion dafür geschrieben. Für den Fall, dass Sie mit dem HTML-Code stecken bleiben und Zeilen wie diese erweitert haben, könnte mein Plugin für Sie nützlich sein.

Kopieren Sie die Funktion von meinem jsFiddle und verwenden wie so:

var pair1 = findCousin('h2', 'pair', '4n+2'); 
var pair2 = findCousin('h2', 'pair', '4n+3'); 
var s = pair1.add(pair2); 

Sie ändern können h2 und pair zwei verschiedenen Klassennamen, oder so lange verschiedene Muster verwenden, wie es #n in ihm hat, und gegebenenfalls +# nur wie der css nth child selector. Hinzufügen false als vierte Argument ...

findCousin('list-title', 'list-item', '3n', false); 

...wird alles nach dem ersten list-title in dem gegebenen Muster auswählen, anstatt nach jederlist-item .... wenn das irgendeinen Sinn ergibt.

Ich glaube, sh0ber hat eine praktischere Lösung geschrieben, aber das hat Spaß gemacht und ich könnte es auch teilen.

http://jsfiddle.net/REU33/6/

Answer 2

Wenn wir nur die 3. und 4. .pair nach jedem .h2 wollen, dann wird diese Arbeit:

.h2 + .pair + .pair + .pair, 
.h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; } 

Wenn wir von zwei alternativen fortsetzen wollen auch in einer längeren Liste, wir müssen eine andere Lösung.

---

EDIT: Da wir eine skalierbare Lösung tun wollen, wenn wir das Markup leicht durch Umwickeln jeden Block von .pair Elemente mit einer anderen Klasse ändern können:

<div class="h2 colors">Title: Colors</div> 
<div class="pairList"> 
    <div class="pair">Hello world</div> 
    <div class="pair">Hello world</div> 
    <div class="pair">Hello world</div> 
    <div class="pair">Hello world</div> 
    ... 
</div> 

Dann können wir eine Regel schreiben das wird für jede Menge Gegenstände wie maßstabs:

.pairList .pair:nth-of-type(4n+3), 
.pairList .pair:nth-of-type(4n+4) { 
    background: #FFAAAA; 
} 

Here is a FIDDLE

Answer 3

Dies ist eine Lösung Geschwister, n-te-Kind und n-last-Kind Selektor kombiniert.

Jeder Ihrer divs mit Klasse h2 sollte auch eine zusätzliche Klasse, die ich „Farben“ und „Einheiten“ wie so nennen:

<div class="h2 colors">Title: Colors</div> 
... 
<div class="h2 units">Title: Colors</div> 
... 

Wir gelten für alle Kinder, die einen vorhergehenden Geschwister präsentiert mit Klassen h2 und Farben die folgende Regel, die die rosa divs

.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { 
    background: #FFAAAA; 
} 

natürlich malen wird dies auch jene divs unter dem Lack div der Klassen h2 und Einheiten. Das wollen wir nicht. Nun wenden wir die folgenden zwei Regeln an und wählen in umgekehrter Reihenfolge bis zu h2 Einheiten. So

.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { 
    background: #FFAAAA; 
} 

Beachten Sie, dass jetzt müssen wir auch den weißen Hintergrund gelten die zusätzlichen divs durch unsere erste Regel gemalt zu beheben ...

.h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { 
     background: #ffffff; 
    } 

Das Einzige, was darauf zu achten ist, die gerade oder ungerade Anzahl der divs in der letzten Gruppe, wenn wir den nth-last-child-Selektor verwenden.

Und da bist du!

Hier ist die fiddle mit