css - Styling both grouped and flat list items using Spree and jQuery-Select2

Preamble: This problem is within the context of Spree and the jQuery-select2 library, however it should be answerable for anyone not familiar with those libraries as it mostly pertains to CSS styling.

General problem statement: I have a page with two select boxes, which are being created and handled using jQuery-select2. The first one is a simple flat list. The second, however, is a grouped list. The alternating colour styled applied by Spree is botched on the second list as a result of how select2 creates the sublist and the styles being applied to it, coming from Spree.

Problem Details:

The structure of the select box created by select2 for a simple flat list looks something like this:

   
List item 1
    ... other list items

And Spree applies styling to the class select2-results and the list elements. Specifically, the alternating list colour styling is:

.select2-results li:nth-child(odd) {
    background: #efefef;
}

In the case of a grouped list, select2 creates the following structure instead:

   

       
Label for group list #1

       

           

               
List item for group #1

           
       

   
    ... other list items

Note: I have omitted most of the classes applied to these elements because I fear it would make the example unreadable. If anybody would like me to add them all here, let me know. Barring that, they are properly represented in the jFiddle example (link below).

The problem is that the nth-child(odd) styling is being applied to both the inner AND outer li elements. As a result, I end up with one list group that is one solid colour, like so:

While the second list appears correctly (because, of course, the nth-child(odd) is not being applied on the even numbered list items.

The styling for these lists is coming from here in the Spree framework.

This is a jFiddle containing an example representing this exact scenario. You can see how the styling is affected as I described.

As I said at the top, this is more related to a styling / CSS problem, as I can potentially omit / override the Spree styling. Ultimately, I am at a loss as to how I can solve this problem. In plain English, I feel like I want the CSS to express "apply this style UNLESS the

has a child

", or something to that effect. However, as far as I know, it is not possible.




The Question: how can I apply an alternating list item styling such that both a flat list, and a grouped list with sub lists are styled correctly without one overriding or blanketing another?

Answer

The select2 classes that you omitted on the li allow you to revert the backgrounds.

select2-result-unselectable select2-result-with-children

So, adding the following after your nth-child should revert the background-color of those top li tags:

li:nth-child(odd).select2-result-unselectable {
    background-color: #ffffff;
}