Bug 286856
| Summary: | :focus vs. :focus-within | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | stevestasteislost |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | bfulgham, koivisto, rego, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Other | ||
| Hardware: | Unspecified | ||
| OS: | macOS 13 | ||
stevestasteislost
Focusing a descendant does NOT trigger :focus-within on that element and NOT an the ancestors.
<html><head>
<style>
div { inline-size: 50%; block-size: 50%; }
.par {
background-color: yellow;
&:focus-within {
background-color: red;
}
}
.desc {
background-color: blue;
&:focus {
background-color: green;
}
}
</style>
</head><body>
<div class="par">
<p>Foo</p>
<div class="desc">
<p>Bar</p>
</div>
</div></body></html>
Opten the inspector and do some set/unset on “foo” and/or “bar”.
MDN says: “The :focus-within CSS pseudo-class matches an element if the element OR ANY of its descendants are focused. In other words, it represents an element THAT IS ITSELF matched by the :focus pseudo-class OR HAS a descendant that is matched by :focus. (This includes descendants in shadow trees.)”
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/144439319>
stevestasteislost
You blame safari for that? Well, Firefox is not doing something. But: if you have a look inside its inspector, you can see the following. Setting :focus to an child element, the parents will be marked with :focus too!
:focus, but NOT :focus-within!
In my eyes this is a clear sign of same basic concepts about that.