A css-selector that a parent with child

Sometimes we want to select elements with known child, we can use :has() selector, but no browser support now. (just check can i use :has() - https://caniuse.com/?search=%3Ahas())

However, we can use jQuery to select these elements by :has() like $("div:has(span.red)").

There is an example to show how it works:

https://codepen.io/timhuang/pen/jOqpxbY

$("div:has(span.red)").append("<p>this paragraph was added by jquery</p>"); 

jQuery is support the :has() pseudo-class just a draft on W3C:

https://drafts.csswg.org/selectors-4/#relational

After the draft turning into specification we can use :has(), maybe css 4.

Comments

[Ingo Steinke, web developer]

Parent selectors are finally here! Or rather, there, as Safari is the first browser to implement them: dev.to/ingosteinke/css-hasparent-s...

[Timothy Huang]

Great! Thanks for your information.