CSS select: how to count and select child of a specific class only?

Tags: css,css-selectors

Problem :

Given the html where all items are at the 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 to select the n+3 and n+4 .pair elements starting from the previous .h2 element ?

So the 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; } but it count the child of the body where the .h2 are also child and thus break my balance.


Edit: no pure CSS selector was found to select adjacent items following a pattern such as .class (n+3). Alternatively, an infinite series of CSS selectors such div + .class + .class + .class ...; wrapping in a div together with :nth-child(n+3) or :nth-of-type(n+3); or JS is needed. You know an other hack ? Sharing welcome !

Solution :

Out of boredom and curiosity I've written a function to do this. In the case that you are stuck with the html as is and you have extended rows like this, my plugin could be useful to you.

Copy the function from my jsFiddle and use like so:

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 patterns as long as it has #n in it, and optionally +# just like the css nth child selector. Adding false as a fourth argument...

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

...will select everything after the first list-title in the given pattern, rather than after each list-item.... if that makes any sense.

I believe sh0ber has written a more practical solution, but this has been fun to make and I might as well share.


    CSS Howto..

    How to detect MAC OS' inverted color mode in javascript / css?

    How to hover over the whole button in css

    How to create a dynamic box with shadow - using PNG pictures

    How to fix roll link in IE11

    How to design a cross client / browser compatible email?

    Creating a calendar control using CSS: How to auto layout events

    How to prevent randomly positioned images from overlapping using Angular

    How to make IE support min-width / max-width CSS properties?

    How to append a CSS rule to the another CSS rule

    How to attach a CSS stylesheet to FXML?

    How to move the Google Chart's annotation to the top or anywhere with CSS?

    How can I get a button on the side of a text box to be perfectly aligned all the time?

    How to prevent opening a link of the submenu when tapping the menu?

    onsen ui 2 : how to implement android style scrollable tabbar?

    Android How to load Custom CSS on external HTML page in WebView

    How to correctly style drop-down menu

    Transition animation to show hidden content

    How can i change jquery-div creation to some other method

    How to document a webpage HTML and CSS using comments [closed]

    How to modify this JQuery CSS into my view?

    How to make a
    container width and height for each same as “the value of clientWidth and clientHeight in maximized window”?

    How to add image, that overlapping Bootstrap modal?

    css nested classes, how to not repeat code?

    Use css to not show the text box

    How to use jquery to cycle elements bg color on click, and reset upon another element's click

    how to target css for ie9 only?

    CSS: How to set minimum and maximum height according to inside?

    How to turn off materialize css containers when on mobile?

    How should I divide up CSS files to support multiple devices?

    How to adapt website to user's Screen Resolution?