← Back to release summary

User action pseudo class top layer boundary

Category
CSS
Type
No developer-visible change
Status
Proposed (Chrome Proposed)
Intent stage
None

Summary

This feature represents the behavior described in this section of the CSS spec: https://www.w3.org/TR/selectors-4/#useraction-pseudos which says that :hover, :active, and :focus-within match on the parents of elements, but only up to the first top layer element in the parent chain. The change for Chromium is that last "up to the top layer" part of this behavior. Concretely, this means that in the following structure if the user hovers the `<button>`, then the `:hover` pseudo class will match the `<button>` and the popover, but will not match the `<main>` element. ``` <main> <div popover> <button></button> </div> </main> <script>document.querySelector('[popover]').showPopover();</script> ``` The rationale behind this change is that typically top layer elements are rendered "elsewhere", in a location that is disconnected from the parent element visually. So it typically does not make sense to change the styles of the parent element when the top layer element is hovered or activated, for example. The customizable select implementation shipped in Chromium has this logic hard-coded for the specific case of the select `::picker()` popover. That special case logic is being removed in favor of the more general behavior with this feature.

Motivation

Without this feature, the user action pseudo elements can feel "broken", since they apply to elements that are disjoint from the UI being interacted with. Top layer elements are very commonly displayed in a different location than their parent elements, by their nature.

Standards & signals

View on chromestatus.com