Zusammenfassung

  • Der W3C-Entwurf zu Selectors Level 4 vom November 2018 beschrieb :has() für Beziehungen zu Kindern und folgenden Geschwistern, nahm es aber aus dem Live-Profil für CSS heraus.
  • Der Entwurf vom Mai 2022 strich die Profile und führte :has() als optionale, gefährdete Funktion; die Revision vom November untersagte verschachteltes :has() und gewöhnliche Pseudoelemente innerhalb des Arguments.

Eine Redaktion baut Kacheln für ihre Startseite. Manche Artikel bekommen ein großes Bild, manche leben vom Titel. Wenn ein Bild da ist, soll sein Rahmen mehr Platz lassen. Das Bild innerhalb des Rahmens zu gestalten, bereitet CSS wenig Mühe. Den Rahmen wegen des Bildes anders zu gestalten, war lange ein Umweg: eine zusätzliche Klasse, ein Eingriff ins Template oder ein Skript als Bote. Die Information lag bereits im Dokument. Die Haustür verlangte dennoch ein eigenes Meldeformular für jeden neuen Bewohner.

Der W3C-Entwurf vom 21. November 2018 kannte die passende Frage. a:has(> img) wählt einen Link, der ein Bild als unmittelbares Kind enthält. Der Link ist das ausgewählte Element, das Bild liefert die Bedingung. dt:has(+ dt) wählt dagegen einen Definitionsbegriff, auf den unmittelbar ein weiterer folgt. Die beliebte Bezeichnung „Elternselektor“ erzählt nur die halbe Geschichte. Das Verfahren blickt auch zur benachbarten Wohnung. Entscheidend ist eine Beziehung, die vom gerade untersuchten Element ausgeht.

Die Frage stand 2018 allerdings hinter einer Glasscheibe. Der Entwurf unterschied ein Live-Profil für laufende CSS-Auswahl und ein Snapshot-Profil für die Prüfung eines statischen Dokumentbaums zu einem Zeitpunkt. Als Beispiel für Letzteres nannte er querySelector(). :has() gehörte zum Snapshot-Profil und war ausdrücklich vom Live-Profil ausgenommen. Ein Prüfwerkzeug durfte nach dem Bild im Haus fragen. Das laufende Stylesheet sollte nach den Regeln dieses Entwurfs schweigen. Die Verfasser baten Implementierer, diese Einteilung zu prüfen. Der Brief war geschrieben, aber der Postbote hatte keinen Schlüssel.

Der Entwurf vom 7. Mai 2022 wechselte das Schloss. Sein Änderungsprotokoll hält fest, dass die Selector-Profile entfernt wurden. :has() wurde stattdessen als optional und gefährdet markiert. Die feste Trennung von statischer Abfrage und lebendigem CSS verschwand. Ob ein Browser die Funktion unterstützte, blieb in diesem Entwurf eine Entscheidung der Implementierung. Die Hausordnung erlaubte nun die Frage; jeder Browser musste selbst beschließen, ob er sie beantwortete.

Der kleine Ausdruck verlangt sorgfältiges Lesen. Bei a:has(> img) fordert > ein direktes Kind. Bei dt:has(+ dt) fordert + das unmittelbar folgende Geschwister. Ein anderes Zeichen stellt eine andere Frage. Vor dem Doppelpunkt steht das Element, das am Ende gewählt wird; in der Klammer steht der relative Test. So kann eine Karte wegen ihres Bildes mehr Luft bekommen, während zwei aufeinanderfolgende Begriffe als Gruppe behandelt werden. Der Dokumentbaum bleibt derselbe. Der Rahmen reagiert auf das, was ohnehin in ihm oder neben ihm steht.

Der Mai-Entwurf liefert noch eine Falle für eilige Korrekturleser. section:not(:has(h1, h2, h3, h4, h5, h6)) sucht einen Abschnitt ohne Überschrift in seinen Nachkommen. section:has(:not(h1, h2, h3, h4, h5, h6)) sucht hingegen einen Abschnitt mit irgendeinem Nachkommen, der keine Überschrift ist. Ein Abschnitt mit sauberer Überschrift und normalem Absatz kann die zweite Bedingung erfüllen. Eine verschobene Klammer, und die Regel hat ein anderes Ziel. In dieser Redaktion bekommt die Zeichensetzung ein eigenes Büro.

Die Revision vom 11. November 2022 zog Grenzen um die neue Neugier. Ein :has() darf nicht in einem anderen :has() stehen. Pseudoelemente sind im Argument grundsätzlich ausgeschlossen. Der Text erklärt den Grund: Einige dieser Elemente entstehen abhängig vom Stil ihrer Vorfahren. Müsste ein Vorfahr seinen Stil anhand solcher von ihm selbst erzeugten Elemente bestimmen, entstünde ein Kreis. Familienrat ist gut; ein Familienrat, der seine eigenen Mitglieder erschafft, um danach über ihre Existenz abzustimmen, ist ein schlechter Stundenplan.

Die W3C-Veröffentlichungsgeschichte ordnet die Stufen von 2018 und 2022. Sie zeigen, wie aus einer beschreibbaren, aber für Live-CSS gesperrten Beziehung eine optionale Möglichkeit für Stylesheets wurde. Der Browser prüft die Beziehung im Baum. Die Redaktion entscheidet, wann sie die Darstellung verändern soll. Eine bebilderte Karte gewinnt Platz für ihr Bild. Ein unbezeichneter Abschnitt lässt sich finden. Das Dokument muss keine zweite Liste über seinen eigenen Inhalt führen, bloß damit der äußere Rahmen Bescheid weiß.

Die Eltern haben endlich Post erhalten. Auch vom Nachbarn lag eine Karte im Briefkasten.