Target parent element depending on class of child

I’m using the bootstrap multiselect library. I’m grouping options together and I want to style the group heading. The HTML ends up like:

<div id="status-dropdown">
    <ul>
        <li>
            <label class="multiselect-group">Group 1</label>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Option A"> Option A</label>
            </a>
        </li>
        <li>
            <label class="multiselect-group">Group 2</label>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Option B">Option B</label>
            </a>
        </li>
        <li class="customDropdownUL">
            <a href="javascript:void(0);">
                <label class="checkbox">
                    <input type="checkbox" value="Option C"> Option C</label>
            </a>
        </li>
    </ul>
</div>

And my CSS is:

li{
    list-style-type: none;
}  

#status-dropdown li:has(> label.multiselect-group) {
    background: none repeat scroll 0 0 whitesmoke;
    padding-left: 10px; 
}

So if a li has a label with class of multiselect-group then give it a background and padding. However, this isn’t working. See the jsfiddle here.

Note: I cannot simply put a class on the li as I would need to modify the library to do that.

How can I target a parent element depending on class of the child?


Source: html

Leave a Reply