如何使用CSS选中包含指定类名后代元素的父元素

结论 #

可以实现。在CSS Selectors Level 4规范新增:has()伪类之前，CSS本身不支持根据后代元素特征反向选中父元素，现在借助:has()伪类即可原生实现该需求。

具体实现 #

针对你给出的代码示例，只需编写如下CSS规则：

parent:has(.foo) {
  /* 此处填写你要应用给符合条件的父元素的样式 */
  background: #f0f0f0;
}

该规则会自动匹配所有存在.foo类后代的<parent>元素，你示例中class为B的parent元素会被该规则命中。

兼容性说明 #

目前市面上主流浏览器均已支持:has()伪类：

• Chrome 105及以上版本
• Firefox 121及以上版本
• Safari 15.4及以上版本

如果需要兼容更低版本浏览器，可以使用JavaScript实现同样的效果：

document.querySelectorAll('parent').forEach(el => {
  if (el.querySelector('.foo')) {
    el.classList.add('contains-foo')
  }
})

后续你可以直接对.contains-foo类编写样式即可。

内容的提问来源于stack exchange，提问作者Emma