First select the next sibling: not () matching the class

Question

I looked at other Q & As, but did not find this specific example. (Please point me if I missed this)

I have no control over HTML that looks like this:

<table> <tbody> <tr class="group open"><td>stuff</td></tr> <tr class="child"><td>stuff</td></tr> <tr class="child"><td>stuff</td></tr> ditto <tr class="group"><td>stuff</td></tr> //Style this one only <tr class="group"><td>stuff</td></tr> //etc. </tbody> </table> 

(Yes, the name ".child" is not very accurate here, not my code.)

Is it possible to create the first next brother of tr.group, which is not tr.child? There can be any number of tr.child elements after tr.open.

I tried this without success:

 div.mystuff table tr.group.open + tr:not(.child) 

The only thing I can add is that the tr.child elements are set to display: none at boot time. But this should not affect the display on the screen: block.

Answer 1

You can try the following:

 div.mystuff table tr.child + tr.group { /* your styles */ } 

fiddle

Answer 2

You can also use:

 div.mystuff table tr.group.open ~ tr.child + tr.group { color: sky; } 

http://jsfiddle.net/emtZC/4/

Answer 3

Impossible with CSS only

If you were dealing with one open element , then it could work: look at this script to demonstrate this code:

 .mystuff table .open ~ .group { /* select all */ background: #ffff00; } .mystuff table .open ~ .group ~ .group { /* revert all but first */ background: #aaaaaa; } 

But with a few .open elements or in order not to override the code, even if there was only one, the problem is that the code will still have other .child elements, but not shown. However, their non-displayed ones are not relevant to the selection ( see Adrift's answer with hidden children and my answer doesn't work with multiple children ). It is the use of unused .child elements .child is still the "substitute" behavior that you see in your actual case from many lines (and many hidden children); this has nothing to do with javascript redefinition (as your comments indicate what you suspect), it's just a way to use contiguous CSS and common selectors.

I believe that your only solution will be through javascript, here is the jquery solution (changing the background color):

 $('.open').each(function(index) { $(this).nextAll('.group:not(.open)').first().css('background', '#ff0') });