Csswg-drafts: Do we need :focus-visible-within ?

[dbaron]

While looking to close out w3ctag/design-reviews#233, one other thought occurred to me:

Is there a need for :focus-visible-within to complement :focus, :focus-within, and :focus-visible?

In particular, because of limitations on CSS selectors (that is, the difficulty of selecting an element that is an ancestor of an element with a particular characteristic), we've added :focus-within to have a version of focus that behaves like the hierarchical :hover and :active. I think this was desirable because it's not unusual for a visible container to be styled differently when something inside it has focus. Consider examples ranging from an operating system window to a <fieldset> with a bunch of form controls in it. (I suspect there may be better documentation if you trace from where we agreed to add :focus-within.)

It's not clear to me whether the use cases for :focus-within and the use cases for :focus-visible combine. Do we also need :focus-visible-within, or not?

/cc @alice @robdodson @bkardell @AmeliaBR @frivoal

[AmeliaBR]

I personally don't see a use case.

:focus-within is for cases where you really want to enhance focus styling (highlight/expand an entire group of interactive elements), :focus-visible is for cases when you want the styling to be more subtle, only-when-necessary.

But regardless, there's nothing stopping it from being added later if there is a strong demand from authors, once those authors have a chance to really work with the two new selectors.

[Malvoz]

This was brought up in https://github.com/WICG/focus-visible/issues/151

[tabatkins]

I don't think there's any significant use-case difference between "want to see if a descendant has :focus" and "want to see if a descendant has :focus-visible". If you want one, there's a good chance you might want the other. (Or to put it another way, :focus is often not what you actually want in the first place; you usually want :focus-visible, and thus you'll probably want a -within variant if you're currently suboptimally using :focus-within.)

However, if we do decide to add such a thing, I'm against just spamming more keywords into the name; that's unwieldy and you have to remember the (arbitrary) order of the modifier keywords. Instead, I'd say we should expand :focus into a :focus() functional pseudo, like :drop(), taking a list of keywords in any order. So you'd write :focus(visible within) or whatever.

[Justineo]

IMO it's better to have :has(:focus)/:has(:focus-visible) instead of :focus-within/:focus-visible-within. Not sure if this is discussed earlier.