Filter CSS selector based on child properties

Question

Given that there are no parent selectors in CSS and even in Python one must resort to XML to get to parent elements, how might one target the <li> element which contains the <span class="foo"> element?

<ul>
    <li><span class="bar">John</span></li>
    <li><span class="bar">Paul</span></li>
    <li><span class="foo">George</span></li>
    <li><span class="bar">Ringo</span></li>
</ul>

This is in CSS: no Javascript, jQuery, Selenium, or Ford Pantera in the environment.

Answer 1

At the moment, you can't.

CSS Selectors Level 4 has a new selector :has

MDN Reference :has

The :has() CSS pseudo-class represents an element if any of the selectors, relative to the:scope of the given element, passed as parameters, matches at least one element. The :has() pseudo-class takes a selector list as an argument.

In your case it would be

`li:has(span.foo) {}`

At present though, no broswer supports this selector.