CSS BETWEEN the selector?

Question

I understand the "adjacent selector" +

What I would like to do is change the style of the element based on div classes on either side of it. For instance:

<div class="positive">...</div> <div class="divider"></div> <div class="negative">...</div> 

"positive" and "negative" classes have different backgrounds, and assignments may vary depending on user interaction, etc. I would like div.divider to select a background based on divs classes on either side of it. We have dividers that “transition” from positive to negative, from negative to positive, positive, negative to negative, etc. There are more states, these are just examples.

The idea is that JS changes the divs class on either side of the div.divider. I need to change the style of the separator (mostly the background).

Is it possible?

Answer 1

CSS doesn't work, and I don't think I have a BETWEEN selector. Browsers treat web pages as streams, and between selectors it is required to refer to a previously read element, slowing down the rendering time. This page contains explanations regarding the desired parent selector, which is also somewhat applicable to the between selector.

Using an intermediate div only as a style element is not semantically appropriate, perhaps this is the best option.

I find it best to use the ADJACENT selector to change the top of either positive or negative in response to its neighbor. Using CSS3:

 .positive + .negative { border-top-image:url('NEGATIVE_BELOW_POSTIIVE'); } .negative + .positive { border-top-image:url('POSITIVE_BELOW_NEGATIVE'); } 

You can also use multiple background images in CSS3 according to:

 .positive + .negative { background-image:url('NEGATIVE_BELOW_POSTIIVE'); background-position:center-top; } .negative + .positive { background-image:url('POSITIVE_BELOW_NEGATIVE'); background-position:center-top; } 

In CSS2 and earlier, you probably need to pre-create all your background images and modify them using the strategy above.

 .positive, .negative { background-image:url('DEFAULT'); } .positive + .negative { background-image:url('NEGATIVE_BELOW_POSTIIVE'); } .negative + .positive { background-image:url('POSITIVE_BELOW_NEGATIVE'); }