[Webkit-unassigned] [Bug 286856] New: :focus vs. :focus-within

Sat Feb 1 03:52:44 PST 2025

https://bugs.webkit.org/show_bug.cgi?id=286856

            Bug ID: 286856
           Summary: :focus vs. :focus-within
           Product: WebKit
           Version: Safari 18
          Hardware: Unspecified
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: stevestasteislost at icloud.com

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.)”

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20250201/dbdafe17/attachment-0001.htm>