[css-pseudo] Please change the behavior of :focus-within

[jolleekin]

Current behavior

Matches an element that has user focus or contains an element that has user focus

Expected behavior

Matches an element that contains an element that has user focus

Reasons

1. The current behavior overlaps with that of :focus (non-orthogonal)

2. Consider this nested UI scenario: list view items containing nested buttons. The list view items and the nested buttons are clickable.
   

   • When user presses a list view item, the :active state should be applied to it
   • When user presses a nested button, the button should be styled as :active, but the list view item should not be. With the current behavior of :focus-within, this is impossible to achieve. However, if the behavior of :focus-within is changed to the expected behavior above, this can be achieved as follows

   /* User presses the list view item, not the buttons */
   list-view-item:active:not(:focus-within) {
     background-color: #0006;
   }
   
   /* User presses a nested button */
   button:active {
     background-color: #0006;
   }

3. The current behavior can be achieved by combining :focus and :focus-within

Refercences

https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo
https://stackoverflow.com/questions/33114318/css-prevent-parent-element-getting-active-pseudoclass-when-child-element-is-cl

[tabatkins]

The overlapping nature of the pseudos is intentional - in many cases you do want to apply your focus styles whether the element itself or a descendant is what has focus, so the eye is drawn to the element in either case.

Cases like yours were considered relatively rarer, and they're still solveable with the current design:

Select parent when...	Parent has focus	Parent doesn't have focus
Child has focus	:focus-within	:focus-within:not(:focus)
Child doesn't have focus	:focus	:not(:focus-within)

[Loirooriol]

More specific to your usecase,

• If your list-view-item is not focusable, it doesn't matter whether :focus-within includes :focus or not.

• So I'm assuming that it's focusable. Then you should be able to use list-view-item:active:focus to achieve the behavior that you want.

• If you don't know whether the list-view-item will be focusable or not, then

  list-view-item:active:is(:focus, :not(:focus-within))

It may not seem ideal in your case but most times that I use :focus-within I do want to include :focus.

[jolleekin]

:focus:active does work for me. Thanks for your help.