- From: Joey Arhar via GitHub <noreply@w3.org>
- Date: Wed, 01 Oct 2025 21:21:19 +0000
- To: public-css-archive@w3.org
josepharhar has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-selectors-4] Should :active apply to ancestor elements during keyboard activation? ==
Consider the following:
```html
<div class=parent>
<button>button</button>
</div>
<style>
.parent {
border: 5px solid gray;
}
button {
border: 5px solid black;
}
.parent:active {
border-color: red;
}
button:active {
border-color: green;
}
</style>
```
The selectors spec says that :active should apply to the element and its flat tree ancestors, but activating the button with the keyboard (spacebar) has different behavior in browsers than clicking the button with a mouse.
Chrome, firefox, and safari all apply :active to the element and its ancestors when clicking the button, but when activating the button with the spacebar:
- Chrome and safari apply :active to the button but not its ancestors.
- Firefox does not apply :active to the button or its ancestors.
I think the HTML spec suggests that keyboard activating the element should make it :active, but what about the ancestor elements? I don't know why it was built this way in the browsers. This came up in [a chrome bug](https://issues.chromium.org/issues/443106927).
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12891 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 1 October 2025 21:21:20 UTC