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.

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


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.

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


    CSS Howto..

    how to CSS select all th cells, except the last one on IE7/8?

    How to set style for a column in an extjs 4 grid [closed]

    How to remove/reset/not inherit the CSS properties of a DIV/element/… within the same CSS document?

    How to position an image of different size using css?

    javascript/jquery - how to get the width of an element / css class that hasn't been added to dom yet

    Webpage Css Error.. Not Showing Anything

    Navbar on left of page, how to let content resize to match screen size?

    How to click and swap a text in a button?

    How to add image, that overlapping Bootstrap modal?

    JQuery with IE reading inherted css property, how to prevent?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    how to force horizontal scrolling in an HTML list using CSS?

    How do I align elements using CSS?

    How to crop an image edge

    How do I style the asp.net membership control with css?

    How to enable CSS editing in Intellij

    How to get this partially diagonal shape from an image in CSS

    jQuery hide show id

    HTML divs, how to wrap content?

    How To Set Height of Child Div According To Parent Div

    How to write specific CSS for mozilla, chrome and IE

    How to create responsive square

    How to change CSS display property using an anchor tag?

    How do i cover the image on navbar as well?

    Show just the necessary div when user clicks on a targeted div

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    How to format CSS for 8.5x11 inch printed pages

    How to remove the border line around the element in html and css?

    How to highlight anchor link when target div comes in view - jQuery

    How to CSS for today's Internet? [closed]