W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2020

[csswg-drafts] [css-pseudo] Please change the behavior of :focus-within (#5654)

From: Man Hoang via GitHub <sysbot+gh@w3.org>
Date: Fri, 23 Oct 2020 16:45:19 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-728365500-1603471517-sysbot+gh@w3.org>
jolleekin has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo] Please change the behavior of :focus-within ==
## 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


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5654 using your GitHub account

Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 23 October 2020 16:45:22 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:21 UTC