Question

I understand the ‘adjacent selector’ +

What I’d like to do is change the styling of an element based on the classes on div’s on either side of it. For example:

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

‘positive’ and ‘negative’ classes have different backgrounds and assignments might change based on user interaction, etc. I would like the div.divider to select a background based on the classes of the divs on either side of it. We have dividers that ‘transition’ from positive-to-negative, negative-to-positive, pos-to-pos, neg-to-neg, etc. There are more states, these are just examples.

The idea is when JS changes the class of divs on either side of a div.divider I’d like the divider’s style (mainly background) to change.

is this possible?

Answer 1

CSS does not, and isn’t (I don’t think), slated to have a BETWEEN selector. Browsers handle web pages as streams and the between selector requires referring to a previously-read element, slowing rendering times. This page has an explanation regarding the coveted parent selector which is also somewhat applicable to the between selector.

Using an intermediate div merely as a styling element is not semantically appropriate, the following might be a better option.

I think your best bet would be to use the ADJACENT selector to change the upper portion of either the positive or negative in response to its neighbour. Using CSS3:

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

You could also use multiple background images in CSS3 as per:

.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’d probably need to prebuild all your background images and change 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'); }