Target parent element depending on class of child

Question

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?

@Turnerj: That edit was vandalism and should **not** have been approved, let alone improved. — BoltClock, Sep 17 '15 at 08:40
@BoltClock, ummm, I don't see where the vandalism was with that edit. It is cool if I'm wrong, can you explain what exactly was wrong? (maybe in chat) — Turnerj, Sep 17 '15 at 08:43
@Turnerj: Code formatting for things that aren't code, like the words "library", "HTML", "class" and "child". The only code edits that were necessary and appropriate are the ones already in the question. Your changes were fine, however the other edit was not. — BoltClock, Sep 17 '15 at 08:43
@BoltClock Ahhhh yep, I removed library and HTML from being code formatted but missed "class" and "child". In the future, reject and edit? — Turnerj, Sep 17 '15 at 08:44
@Turnerj: Yep. IIRC, reject and edit takes you to the editor with the changes from the original edit completely removed, which gives you a clean slate to work with (on top of actually rejecting the edit). — BoltClock, Sep 17 '15 at 08:49

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

You appear to be attempting to use the :has() pseudo-class from Selectors 4. Although you are using it correctly, this feature hasn't yet been implemented, so it's not going to work anywhere.

There is no CSS-based alternative at the moment. Refer to Is there a CSS parent selector? for updates and workarounds.

edited May 23 '17 at 12:29

Community

1
1

answered Sep 17 '15 at 08:42

BoltClock

630,065
150
1,295
1,284

I feel like we should be excited for when this is supported, is this good direction for pseudo selectors to be going? Seems like a logical way to grab parent elements for specific child elements. – samuelkobe Nov 08 '18 at 19:39

Target parent element depending on class of child

1 Answers1