Bug 234642 - :has() does not work when the parent is an li
Summary: :has() does not work when the parent is an li
Status: RESOLVED DUPLICATE of bug 234531
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-12-23 12:12 PST by cchana
Modified: 2021-12-26 12:02 PST (History)
2 users (show)

See Also:

Attachments
Screenshot of a codepen showing that the CSS is not applied as expected (150.86 KB, image/png)
2021-12-23 12:12 PST, cchana 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description cchana 2021-12-23 12:12:36 PST 
Created attachment 447898 [details]
Screenshot of a codepen showing that the CSS is not applied as expected

When using li:has() as part of your selector, the syntax appears to be ignored. Works correctly with ul however. The following CSS declaration has three selectors, but only the first and third one work. The one related to li:has() does not apply at all.

    ul:has(ul),
    li:has(ul),
    p:has(a){
      border: 1px solid blue;
    }

I have created a codepen where this can be verified: https://codepen.io/cchana/pen/vYeebQQ

I would expect to see 4 blue boxes on the screen but can only two appear.
Comment 1 Radar WebKit Bug Importer 2021-12-23 12:54:50 PST 
<rdar://problem/86862988>
Comment 2 Antti Koivisto 2021-12-26 12:02:31 PST 
Seems to be fixed in the trunk, I think this was bug 234531.
Comment 3 Antti Koivisto 2021-12-26 12:02:44 PST 

*** This bug has been marked as a duplicate of bug 234531 ***