:is

Der Pseudo-Selektor :is() in CSS ermöglicht es Ihnen, zusammengesetzte Selektoren knapper zu schreiben. Anstatt zum Beispiel zu schreiben

ul li,
ol li {}

Wir könnten schreiben

:is(ul, ol) li {}

Dies kann die Arbeit mit ansonsten extrem wortreichen, komplexen und fehleranfälligen Selektoren erheblich beschleunigen. Siehe

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

/* ... which would be the equivalent of: */
section h1, section h2, section h3, section h4, section h5, section h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  color: #BADA55;
}

Sie können die Pseudo-Klasse an ein Element anhängen, wie Sie es erwarten würden. Zum Beispiel, um einen bestimmten Elementtyp auszuwählen, wenn er eine von zwei Klassen hat

div:is(.cool, .fun) {
  color: red;
}

/*
<div class="cool">match</div>
<div class="fun">match</div>
<p class="fun">not match</p>
*/

Hey, ist das nicht wie CSS-Preprocessing?

Die Vereinfachung von Selektoren mit :is() ähnelt der Art und Weise, wie CSS-Präprozessoren verschachtelte Regeln verarbeiten

/* SCSS written like this: */
div, p, ul, ol {
  span {
    /* ... */
  }
}

/* after processing becomes: */
div span, p span, ul span, ol span {
  /* ...*/
}

/* which is a lot like the effect of :is()! */

Aber Vorsicht! Präprozessoren, wie Sass, „rollen“ Ihre verschachtelten Regeln in eine Liste leicht verständlicher Selektoren „aus“. :is() behandelt Spezifitätsregeln etwas anders.

Spezifität von :is()

Laut dem CSS4 Working Draft

Die Spezifität der :is() Pseudo-Klasse wird durch die Spezifität ihres spezifischsten Arguments ersetzt. Daher hat ein mit :is() geschriebener Selektor nicht unbedingt die gleiche Spezifität wie der äquivalente Selektor, der ohne :is() geschrieben wurde.

Das bedeutet, dass die Spezifität von :is() auf den spezifischsten Eintrag in der Liste der bereitgestellten Argumente „automatisch aufgerüstet“ wird.

/* This has higher precedence... */
:is(ol, .list, ul) li { /* ... */ }

/* ...than this, even though this is later... */
ol li  { /* ... */ }

/* ...because :is() has the weight of it's heaviest selector, which is `.list`! */

Fehlerverzeihende Selektorlisten

Normalerweise, wenn ein Teil eines Selektors ungültig ist, wird der gesamte Block verworfen.

p, p::not-real {
  color: red; /* nothing will be red, as ::not-real is an invalid selector */
}

Ich habe gehört, dass Browser damit in Zukunft vielleicht lockerer umgehen, aber soweit sind wir noch nicht. Wenn Sie dies beibehalten und nicht in zwei separate Blöcke aufteilen möchten, kann is() helfen, da es „fehlerverzeihend“ ist.

:is(p, p::not-real) { /* this is fine */
  color: red;
}

Ich denke immer an ::selection und die Vendor-Präfix-Version ::-moz-selection, wenn ich an ungültige, durch Kommas getrennte Selektoren denke, aber...

:is(::selection, ::-moz-selection) { /* this doesn't work in Chrome for some reason 🤷‍♀️ */
  background: yellow;
}

Browser-Unterstützung

Für die beste Unterstützung sollten Sie auch :matches (mit vendor-geprägtem :any, das einige Lücken füllt) für die allgemeine Funktionalität verwenden. Und :not() ist eine weitere Pseudo-Klasse, die beim Abgleichen helfen kann.

Interessant ist, dass :is() nach :matches eingeführt wurde, das nach :any eingeführt wurde. Es ist so, als ob :any durch :matches ersetzt wird, das durch :is() ersetzt wird, wobei sich die Details im Laufe der Zeit ändern. Es ist immer wieder faszinierend zu sehen, wie sich diese Dinge entwickeln.

Um maximale Unterstützung für „Matches-Any“ zu erhalten, muss eine Mischung aus historischen Namen verwendet werden, da die Browser-Unterstützung zu diesem Zeitpunkt ein Sammelsurium aus Vendor-Präfixen und experimentellen Einstellungen ist.

/* These are deprecated, but still necessary in some browsers: */
:-moz-any(div, p) > em { /* ... */ }
:-webkit-any(div, p) > em { /* ... */ }

/* Has been replaced by :is() in CSS4, but still supported 
by some browsers with experimental features enabled */
:matches(div, p) > em { /* ... */ }

/* Latest syntax */
:is(div, p) > em { /* ... */ }

Verlauf

Ursprünglich hieß diese Pseudo-Klasse :any() und wurde mit begrenzter herstellerspezifischer Unterstützung implementiert.

/* Never actually worked */
:any(div, p) > em { /* ... */ }

Der Name der Pseudo-Klasse „Matches-Any“ wurde dann in frühen Versionen des CSS4-Arbeitsentwurfs in :matches() geändert, wobei einigen Browsern zusätzliche (unvollständige) Unterstützung gewährt wurde.

/* Sort of works */
:matches(div, p) > em { /* ... */ }

Das Ziel des „Matches Any“-Selektors ist es, das Schreiben komplexer Selektorgruppierungen zu vereinfachen, was genau das ist, was wir mit :is() bekommen haben, und noch mehr.

Weitere Informationen

• David Barons Blogbeitrag erklärt, warum er :-moz-any-Unterstützung zu Gecko hinzugefügt hat.
• MDN Dokumentation
• CSS Selectors Level 4 Spezifikation (Editor's Draft 1): Die Spezifikation, die die :is() Pseudo-Klasse einführt.
• Lernen Sie die Pseudo-Klassen-Selektoren kennen: Ein Beitrag von CSS-Tricks, der erklärt, wie Pseudo-Klassen funktionieren.

Verwandt