CSS-Selektor “(A oder B) und C”?

Lesezeit: 4 Minuten

CSS Selektor A oder B und C
Josch

Das sollte einfach sein, aber ich habe Probleme, die Suchbegriffe dafür zu finden.
Nehmen wir an, ich habe dies:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

Wie kann ich in CSS einen Selektor erstellen, der mit etwas übereinstimmt, das mit “(.a oder .b) und .c” übereinstimmt?

Ich weiß, ich könnte das tun:

.a.c,.b.c {
  /* CSS stuff */
}

Aber vorausgesetzt, ich muss diese Art von Logik häufig mit einer Vielzahl logischer Kombinationen ausführen, gibt es eine bessere Syntax?

Gibt es eine bessere Syntax?

Nr. CSS’ or Operator (,) lässt keine Gruppierungen zu. Es ist im Wesentlichen der logische Operator mit der niedrigsten Priorität in Selektoren, also müssen Sie verwenden .a.c,.b.c.

CSS Selektor A oder B und C
Metallcoder

Noch nicht, aber es gibt das Experimentelle :is() (früher :matches()) Pseudoklassenselektor, der genau das tut:

:is.a .b) .c {
  /* stuff goes here */
}

Sie können mehr Informationen darüber finden Hier und Hier. Derzeit unterstützen die meisten Browser die ursprüngliche Version :any()das auf die gleiche Weise funktioniert, aber durch ersetzt wird :is(). Wir müssen nur noch ein wenig warten, bevor wir dies überall verwenden (das werde ich sicherlich tun).

  • Es ist unvernünftig, IE dafür verantwortlich zu machen, etwas nicht implementiert zu haben, an das sie einfach nie gedacht haben und das von Anfang an in keinem Entwurf enthalten war. :-moz-any() und :-webkit-any() tauchte auf, lange bevor Mozilla es für Selectors 4 vorschlug (was zu seiner aktuellen Inkarnation als :matches()).

    – BoltClock

    20. Mai ’15 um 16:25 Uhr


  • Es ist ebenso unvernünftig, von einem Anbieter zu erwarten, dass er eine Funktion aus einem instabilen Entwurf implementiert, unabhängig davon, wie lange der Entwurf verfügbar gemacht wurde (dies soll der Tatsache Rechnung tragen, dass Selectors 4 mehr als drei Jahre nach seiner FPWD instabil und weitgehend nicht implementiert ist). .

    – BoltClock

    20. Mai ’15 um 16:29 Uhr


  • @BoltClock, sie haben IE6 ein ganzes Jahrzehnt lang für Dinge verantwortlich gemacht, die es 2001 nicht gab. Die Leute wollen nur jemandem die Schuld geben.

    – GetFree

    17. August 15 um 18:14 Uhr

  • Ein Wort zu experimentellen ist, dass Sie sich nicht auf sie verlassen wollen, es sei denn, sie werden offiziell implementiert. Obwohl es wie eine großartige Lösung erscheinen könnte – die Möglichkeit, dass es verschwindet, hindert mich persönlich daran, es in meinen Projekten zu implementieren. Selbst den Überblick über eine experimentelle Pseudoklasse zu behalten, gibt mir kein sicheres Gefühl. Höchstwahrscheinlich wird es an mehr als einer Stelle im Projekt verwendet, und falls Sie mehr als eine Stelle haben, an der Sie es verwenden, müssen Sie irgendwie den Überblick behalten. Sie können sicherlich Fallbacks haben und es trotzdem durchziehen, aber das klingt nicht sauber

    – Alexey Shevelyov

    12. August 16 um 19:34 Uhr

  • Nicht mehr experimentell. :is() ist jetzt seit Februar 2021 (MDN) in allen gängigen Browsern implementiert – obwohl es wahrscheinlich noch viel zu früh ist, es für Web-Apps (ohne Fallback) zu verwenden.

    – Maciej Krawczyk

    28. Juli 21 um 7:13 Uhr

1643920327 574 CSS Selektor A oder B und C
Yaakov Bressler

Für diejenigen, die dies lesen >= 2021:

Ich fand Erfolg mit der :is() Wähler:

*:is(.a, .b).c{...}

  • Danke schön. Ich frage mich, ob der Selektor „:is()“ vor 9 Jahren existierte, als ich die Frage stellte?

    – Josch

    29. Januar 21 um 19:16 Uhr

  • Das bezweifle ich! @Josh –> Ich habe diese Antwort hinterlassen, weil dieser Beitrag für mich das Nr. 1-Ergebnis bei Google ist, wenn ich suche, wie man Klassen in einem CSS-Selektor kombiniert. Hilfreiche Antwort für diejenigen, die derzeit zuschauen – obwohl die vorherigen Antworten vielleicht eher ein Artefakt der technischen Entwicklung zeigen.

    – Yaakov Bressler

    29. Januar 21 um 20:10 Uhr

  • @Josch is() ist was ersetzt :matches() aus der Antwort von Metalcoder aus dem Jahr 2014. Siehe developer.mozilla.org/en-US/docs/Web/CSS/:is Für mehr Information.

    – TylerH

    11. März 21 um 14:37 Uhr

Wenn Sie dies haben:

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

Und Sie möchten nur die Elemente auswählen, die haben .x und (.a oder .b), könntest du schreiben:

.x:not(.c) { ... }

aber das ist nur praktisch, wenn Sie drei “Unterklassen” haben und zwei davon auswählen möchten.

Auswahl nur einer Unterklasse (z .a): .a.x

Auswahl von zwei Unterklassen (zB .a und .b): .x:not(.c)

Auswahl aller drei Unterklassen: .x

Nein. Standard-CSS bietet nicht das, wonach Sie suchen.

Vielleicht möchten Sie jedoch nachsehen WENIGER und SASS.

Dies sind zwei Projekte, die darauf abzielen, die standardmäßige CSS-Syntax zu erweitern, indem zusätzliche Funktionen eingeführt werden, darunter Variablen, verschachtelte Regeln und andere Verbesserungen.

Sie ermöglichen es Ihnen, viel strukturierteren CSS-Code zu schreiben, und jeder von ihnen wird mit ziemlicher Sicherheit Ihren speziellen Anwendungsfall lösen.

Natürlich unterstützt keiner der Browser ihre erweiterte Syntax (zumal die beiden Projekte jeweils unterschiedliche Syntax und Funktionen haben), aber sie stellen einen “Compiler” bereit, der Ihren LESS- oder SASS-Code in Standard-CSS konvertiert, was Sie dann können auf Ihrer Website bereitstellen.

  • An diesem Punkt könnte ich genauso gut nur den PHP-Druck von “Content-type: text/css” verwenden.

    – Josch

    22. September 11 um 15:53 ​​Uhr

  • An diesem Punkt könnte ich genauso gut nur den PHP-Druck von “Content-type: text/css” verwenden.

    – Josch

    22. September 11 um 15:53 ​​Uhr

.

759880cookie-checkCSS-Selektor “(A oder B) und C”?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy