Bug 234642

Summary:

:has() does not work when the parent is an li

Product:

WebKit

Reporter:

cchana

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

koivisto, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Intel)

OS:

macOS 11

Attachments:

Description	Flags
Screenshot of a codepen showing that the CSS is not applied as expected	none

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 ***