Request for a "checked-within" pseudo class

[omzy]

Similar to the focus-within (https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) pseudo class, can we have a checked-within pseudo class?

Basically would allow a parent element of a checked checkbox or radio to be targeted. Sample usage:

HTML:

<div class="option">
    <div class="title">
        <input type="radio" id="basic" name="package" value="basic">
        <label for="basic">Basic</label>
    <div>

    <div class="content">
        <!-- some content -->
    </div>
</div>

CSS:

.option {
    background-color: white;
}

.option:checked-within {
    background-color: green;
}

Currently we have to use JS to detect a change event on the radio button in order to apply a class on a parent element (or conditionally apply a class on the server side for rendered pages).

[Zhang-Junzhi]

Love the idea!

[dtruffaut]

I support this feature !

[danielwaltz]

Would love to see this too, would enable a lot of interesting new capabilities!

[awesomesk1ll]

Support

[seeratawan01]

need this

[kyosheek]

approve

[frivoal]

On the one hand, yes. On the other hand, if we're going to need a bunch of :foo-within, making we should think of a generic mechanism, rather than adding them one by one?

[coleholyoake]

Support

[jimmyfrasche]

In a browser that has both :is and :has wouldn't :foo-within be :is(:foo, :has(:foo)), for any :foo? If I'm not wrong there, it sounds like it would be pretty easy to come up with sugar for that and it would be worth it if :foo is some large, ungainly selector

[frivoal]

Right. The :*-within family of pseudos mainly makes sense if :has() isn't expected to be implementable, otherwise it's syntactic sugar (unless the narrower version enables performance optimizations that the general mechanism doesn't). For the longest time, the assumption was indeed that :has() was not implementable in a performant way. It seems that Safari is redefining expectations here, and that we may get :has() after all.

[meyerweb]

I’ve been thinking about this the past day or so due to a question someone asked me on the Twitters, and as far as I can tell, :has() does indeed obviate the need for “within” selectors. The following would seem to have equivalent specificity:

nav:focus-within {…}
nav:is(:focus, :has(:focus)) {…}

Plus one could use :where() to intentionally lower the specificity, if desired.

Admittedly, the :is() construct is a little more baroque than a “within” equivalent, but it might be worth waiting to see how often authors use those sort of patterns before deciding what needs a “within” shortcut.

(Alternatively, we could decide to “within” all the pseudo-classes that might need it by defining them as aliases for their :is() equivalents. As a CSS author and an author of CSS explanatory materials, I’d be fine with that.)

[TanawatJukmongkol]

Yep! I need this for my project. It's impossible to select the parent element whilst a child is in focus. I tried .svg.pin:is(.pin-button:checked) and it doesn't work like it supposed to.

Edit: Oh, nvm. I've found a cleaner solution.

[meyerweb]

Edit: Oh, nvm. I've found a cleaner solution.

Wait, come back — what was the solution? WHAT DID YOU SEE, DENVERCODER9?!?

(https://xkcd.com/979/ for those who didn’t catch the reference.)