NEW286856
:focus vs. :focus-within 
https://bugs.webkit.org/show_bug.cgi?id=286856
Summary :focus vs. :focus-within
stevestasteislost
Reported 2025-02-01 03:52:44 PST
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
Comment 1 2025-02-08 03:53:12 PST
<rdar://problem/144439319>
stevestasteislost
Comment 2 2025-02-11 17:20:03 PST
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.
Note You need to log in before you can comment on or make changes to this bug.