CSS select: how to count and select only children of a certain class?
Given html where all the elements are at the same level:
<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> How to select n + 3 and n + 4.pair elements starting from the previous .h2 element?
So 1 & 2 are white, 3 & 4 are pink, 5 & 6 are white, etc.
I tried .pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; } .pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #FFAAAA; } , but it counts a child of the body, where .h2 are also children and thus upset my balance.
Edit: No pure CSS selectors were found to select adjacent elements following a pattern like .class (n + 3). Alternatively, an endless series of CSS selectors such div + .class + .class + .class ... ; wrapping in a div along with :nth-child(n+3) or :nth-of-type(n+3) ; or js . Do you know another hack? Welcome!
Out of boredom and curiosity, I wrote a function for this. In case you are stuck in html as it is, and you have extended lines like this, my plugin may be useful to you.
Copy the function from my jsFiddle and use like this:
var pair1 = findCousin('h2', 'pair', '4n+2'); var pair2 = findCousin('h2', 'pair', '4n+3'); var s = pair1.add(pair2); You can change h2 and pair two different class names or use different templates if it has #n , and optionally +# , as well as the css nth selector selector. Adding false as the fourth argument ...
findCousin('list-title', 'list-item', '3n', false); ... will select everything after the first list-title in this template, and not after each list-item .... if that makes sense.
I find sh0ber wrote a more practical solution, but it was fun, and I could also share.
This solution combines the sibling , nth-child and nth-last-child selector.
Each of your divs with class h2 should also use an additional class, which I will call "colors" and "units", like this:
<div class="h2 colors">Title: Colors</div> ... <div class="h2 units">Title: Colors</div> ... We apply to all children who represent the previous brother, with classes h2 and colors the following rule, which will draw pink divs
.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { background: #FFAAAA; } Of course, this will also draw those divs below the divs of the h2 classes and units . We do not want this to happen. So, now we apply the following two rules: selection in reverse order to units of h2.
.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { background: #FFAAAA; } Remember that now we also need to apply a white background to fix the extra divs written by our first rule So ...
.h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { background: #ffffff; } The only thing you need to pay attention to is the odd or even number of divs in the last group when we use the nth-last-child selector.
And here you are!
Here is a fiddle to play with
If we want only the 3rd and 4th pairs after each .h2 , this will work:
.h2 + .pair + .pair + .pair, .h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; } If we want to continue alternating by two even on a longer list, we need a different solution.
EDIT : since we need a scalable solution, if we can change the markup a bit by packing each block of .pair elements .pair different class:
<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> Then we can write a rule that will scale for any number of elements, such as:
.pairList .pair:nth-of-type(4n+3), .pairList .pair:nth-of-type(4n+4) { background: #FFAAAA; }