:has ist ein unerbittlicher Selektor

Auf dem Weg zur Veröffentlichung des CSS :has() Selektors im alten Almanac geschah eine kleine Sache. Ursprünglich hatte ich :has() als "verzeihenden" Selektor beschrieben, mit der Idee, dass alles in seinem Argument ausgewertet wird, auch wenn eines oder mehrere der Elemente ungültig sind.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

Siehe ::scoobydoo darin? Das ist total ungültig. Eine verzeihende Selektorliste ignoriert diesen fehlerhaften Selektor und wertet die restlichen Elemente so aus, als wäre sie so geschrieben worden:

article:has(h2, ul) { }

:has() war tatsächlich ein verzeihender Selektor in einem früheren Entwurf vom 7. Mai 2022. Aber das änderte sich nachdem ein Problem gemeldet wurde, dass das verzeihende Verhalten mit jQuery kollidiert, wenn :has() einen komplexen Selektor enthält (z. B. header h2 + p). Das W3C entschied sich für eine Lösung, :has() nur wenige Wochen zuvor zu einem "unerbittlichen" Selektor zu machen.

Also, unser vorheriges Beispiel? Die gesamte Selektorliste ist ungültig, weil der fehlerhafte Selektor ungültig ist. Aber die beiden anderen verzeihenden Selektoren, :is() und :where(), bleiben unverändert.

Dafür gibt es einen kleinen Workaround. Denk daran, dass :is() und :where() verzeihend sind, auch wenn :has() es nicht ist. Das bedeutet, wir können einen der beiden Selektoren in :has() verschachteln, um ein verzeihenderes Verhalten zu erzielen.

article:has(:where(h2, ul, ::-scoobydoo)) { }

Welchen man verwendet, könnte wichtig sein, da die Spezifität von :is() durch das spezifischste Element in seiner Liste bestimmt wird. Wenn du also etwas weniger Spezifisches benötigst, würdest du besser :where() verwenden, da es keine Spezifitätswerte hinzufügt.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { }

/* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Wir haben einige unserer Beiträge aktualisiert, um die neuesten Informationen widerzuspiegeln. Ich sehe viele andere, die ebenfalls aktualisiert werden müssen, also nur eine kleine Durchsage für alle, die dasselbe tun müssen.