CSS BETWEEN selector?
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?
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'); }
精彩评论