:has ist ein unerbittlicher Selektor

Auf dem Weg zur Veröffentlichung ist eine Kleinigkeit passiert CSS :has() Wähler zum alten Almanach. hatte ich ursprünglich beschrieben :has() als „verzeihender“ Selektor, wobei die Idee darin besteht, dass alles in seinem Argument ausgewertet wird, selbst wenn eines oder mehrere der Elemente ungültig sind.

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

See ::scoobydoo da drin? Das ist völlig ungültig. Eine verzeihende Auswahlliste ignoriert diesen falschen Selektor und fährt fort, den Rest der Elemente zu bewerten, als ob sie so geschrieben wäre:

article:has(h2, ul) { }

:has() war in der Tat ein nachsichtiger Selektor in einem früheren Entwurf vom 7. Mai 2022. Aber das hat sich geändert nachdem ein Problem gemeldet wurde dass die verzeihende Natur mit jQuery kollidiert, wenn :has() enthält einen komplexen Selektor (zB header h2 + p). Das W3C landete auf einer Resolution zu um :has() ein „unverzeihlicher“ Selektor erst vor ein paar Wochen.

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

Dafür gibt es eine kleine Problemumgehung. Merken, :is() und :where()verzeihen, auch wenn :has() ist nicht. Das bedeutet, dass wir einen dieser Selektoren verschachteln können :has() um verzeihenderes Verhalten zu bekommen:

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

Welche Sie verwenden, könnte aufgrund der Spezifität von von Bedeutung sein :is() wird durch das spezifischste Element in seiner Liste bestimmt. Wenn Sie also etwas weniger Spezifisches benötigen, sollten Sie besser danach greifen :where() da es nicht zum Spezifitätswert beiträ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 in freier Wildbahn, die aktualisiert werden müssen, also nur eine kleine PSA für alle, die dasselbe tun müssen.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/has-is-an-unforgiving-selector/