Question

Say I have multiple list items in a <ul>, and there are groups of items than contain the .aggregated class. Like this:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
</ul>

I need to be able to style each of those groups of <li> elements differently, basically giving each group a different background color. So, the first group of <li class="aggregated"> would have a blue background, and the second group a yellow background, etc. I don’t want to rely on JS and don’t want to add arbitrary class names or IDs. I’d like to use the code that’s already in place.

Possible? If so, how?

Answer 1

Okay, this is possible. But it’s insanely fragile, and relies on there being predictable classes, also it requires a modern browser:

/* presentational stuff */

li ~ li.aggregated,
li.aggregated ~ li.aggregated {
    background-color: #f90;
}

li.aggregated ~ li:not(.aggregated) ~ li.aggregated {
    background-color: #ffa;
}

li.aggregated ~ li:not(.aggregated) ~ li.aggregated ~ li:not(.aggregated) ~ li.aggregated {
    background-color: #cfc;
}​

JS Fiddle demo.