css selectors - CSS select: how to count and select child of a specific class only? -
given html items @ same level such:
<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 select n+3 , n+4 .pair elements starting previous .h2 element ?
so 1&2 white, 3&4 pink, 5&6 white, etc.
i tried .pair:nth-child(4n+3), .pair:nth-child(4n+4) { background: #ffaaaa; }
count child of body .h2 child , break balance.
edit: no pure css selector found select adjacent items following pattern such .class (n+3). alternatively, an infinite series of css selectors such div + .class + .class + .class ...
; wrapping in div :nth-child(n+3)
or :nth-of-type(n+3)
; or js needed. know other hack ? sharing welcome !
out of boredom , curiosity i've written function this. in case stuck html , have extended rows this, plugin useful you.
copy function jsfiddle , use so:
var pair1 = findcousin('h2', 'pair', '4n+2'); var pair2 = findcousin('h2', 'pair', '4n+3'); var s = pair1.add(pair2);
you can change h2
, pair
2 different class names, or use different patterns long has #n
in it, , optionally +#
css nth child selector. adding false
fourth argument...
findcousin('list-title', 'list-item', '3n', false);
...will select after first list-title
in given pattern, rather after each list-item
.... if makes sense.
i believe sh0ber has written more practical solution, has been fun make , might share.
Comments
Post a Comment