Gibt es einen CSS-Elternselektor?

Question

Wie wähle ich ein

-Element aus, das das direkte übergeordnete Element eines Ankerelements ist?

Mein CSS würde beispielsweise so aussehen:

li <
    Eigentumswert;
}

Natürlich gibt es Möglichkeiten, dies mit JavaScript zu tun, aber ich hoffe, dass es eine Art Workaround für CSS Level 2 selbst gibt.

Das Menü, das ich formatieren möchte, wird vom CMS ausgegeben, sodass ich das aktive Element nicht in das

< verschieben kann ;li>-Element .. (es sei denn, ich thematisiere das Menü und erstelle ein Modul, was ich nicht tun möchte).

Answer 1

您可以使用 :has() CSS 伪-类

但它的浏览器支持有限（目前 Firefox 不支持）。

Answer 2

目前无法以适用于所有浏览器的方式选择 CSS 中元素的父元素。

选择器级别 4 工作草案 包括 :has() 伪类将提供此功能。它将类似于 jQuery 实现，但目前 Firefox 不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

Firefox 是目前唯一默认不支持它的主流浏览器。

与此同时，如果您需要选择具有完全跨浏览器支持的父元素，则必须在 Firefox 中求助于 JavaScript。