Concurrent Sibling selector question

Get Started
1

I’m looking to style elements that have a class of “true” or “selected” with a background color.

The tricky part for me, and one where I believe sibling selectors might come into play (in particular, concurrent sibling selectors if such a thing exist), is that I want a solid background on each element unless its the last sibling with the active class (true or selected) and it has at least one sibling element that has the active class.

In other words, I have a set of list items like so:

<li class="section true">el</li>
<li class="section selected">el</li>
<li class="section true">el</li>
<li class="section">el</li>

In this example, I want the first 2 elements to have a solid background color and I want the 3rd element to have a gradient background color (so it appears to be one continuous background with the fade at the bottom.

Here’s another example:

<li class="section true">el</li>
<li class="section">el</li>
<li class="section selected">el</li>
<li class="section">el</li>

In this example, I want the first element to have a gradient background (since it has no siblings that are true or selected) and I want the 3rd element to have a gradient background for the same reason.

Is it possible to create a CSS selector that will account for both of these scenario’s?

Alternately, if not possible with css, jQuery?

2

For your second example, I think that there is a solution, although its support is not 100% (it never is, is it?).

.section:not(.true, .selected) { whatever }

Hopefully, I’ve written that correctly from memory.