Das CSS: hat Selektor (und 4 Beispiele)

Das CSS :has() Selector revolutioniert die Elementauswahl, indem sie die Eltern basierend auf den Eigenschaften ihrer Kinder abzielen. Es ist mehr als nur ein "Eltern -Selektor" - es bietet leistungsstarke bedingte Styling -Funktionen. Zum Beispiel können Sie stylen<div> Elemente nur, wenn sie a enthalten<code><p> :</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> div: hat (p) { Hintergrund: Rot; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Während zuvor nicht unterstützt, wird <code>:has() jetzt an Traktion gewinnt und erscheint in der Safari Technical Preview 137.

Lassen Sie uns ein weiteres Szenario untersuchen: Hinzufügen von Abstand nach den Headern, aber das Anpassen des Abstands, wenn ein Untertitel vorhanden ist:

 H2,
.subtitel {
  Rand: 0 0 1,5Rem 0;
}
.Header-Gruppe: Has (H2): Has (.Subtitel) H2 {
  Rand: 0 0 0,2rem 0; / * Reduzierter Abstand aufgrund von Untertitel */
}

Beachten .header-group:has(h2):has(.subtitle) die Erhöhung von :has() Selektoren: Dies unterscheidet sich von der Verwendung einer Selektorliste innerhalb :has() wie .header-group:has(h2 .subtitle) . Der angekettete Ansatz wählt die aus<h2></h2> Nur wenn .header-group beide eins enthält<h2></h2> und ein .subtitle Der Ansatz der Auswahlliste hat jedoch eine unterschiedliche Auswahllogik.

Beachten Sie :has() als Pseudoklasse für übergeordnete Auswahl. Es ermöglicht das Styling von Elternelementen, basierend auf ihren Kindern, eine erhebliche Abweichung vom Top-Down-Ansatz des traditionellen CSS. Diese Fähigkeit eröffnet nur zahlreiche Möglichkeiten, die bisher bei CSS bisher unerreichbar sind.

Styling -Links mit Bildern:

 A: Has (> img) {
  Grenze: 20px Feste Weiß;
}

> img stellt sicher, dass das Bild ein direktes Kind der<a></a> . :has() kann auch für die bedingte Marge/Polsterung basierend auf Inhalten verwendet werden.

:has() ist Teil der CSS-Selektoren Level 4 neben der nützlichen :not der Pseudoklasse. Es ist wesentlich leistungsstärker als ein einfacher übergeordneter Selektor. Es ermöglicht die Auswahl eines untergeordneten Elements basierend auf dem Inhalt des Elternteils. Zum Beispiel:

 /* Stilelemente mit a<figcaption> Kind */
Abbildung: Has (Figcaption) {…}

/* Stile<img  alt="Das CSS: hat Selektor (und 4 Beispiele)" > innerhalb von a<figure> enthält a<figcaption> */
Abbildung: Has (Figcaption) img {…}</figcaption></figure></figcaption>

Ketten- und Selektorlisten werden unterstützt:

 Artikel: Has (H2): Has (ul) {…} // gekettet
Artikel: Has (H2, Ul) {…} // Selektorliste

Beachten Sie jedoch, dass ungültige Selektoren innerhalb einer Liste den gesamten :has() -Auskörper ungültig machen. Verwendung :where() oder :is() für eine robustere Behandlung potenziell ungültiger Selektoren.

Testen zur Unterstützung:

 @Supports (Selector (: Has (p)) {
  /* Unterstützt! */
}

Der :not() -Schulter, auch aus CSS Selektoren Level 4, bietet eine hervorragende Browser -Unterstützung und eine verbesserte Lesbarkeit:

 Ul li: nicht (: Erst von Typ) {
  Farbe: Rot;
}

In diesem Stil werden alle Elemente außer der ersten aufgeführt. Ähnliche Techniken können für Ränder verwendet werden:

 Ul li: nicht (: Last-of-Type) {
  Randboden: 20px;
}

Die CSS -Selektoren Level 4 enthält auch :is() und bietet kurze Alternativen zu längeren Selektoren:

 : IS (Abschnitt, Artikel, beiseite): IS (H1, H2, H3, H4, H5, H6) {
  Farbe: #bada55;
}

Zusammenfassend lässt sich sagen, :has() zusammen mit :is() und :not() leistungsstarke und lesbare Möglichkeiten, Elemente basierend auf komplexen Beziehungen innerhalb des DOM zu stylen.

Weitere Lektüre:

• Adrian Bece - Meet :has() , einen nativen CSS -Eltern -Selektor (und mehr)
• BRAMUS VAN DAMME - Der CSS :has() Selektor ist viel mehr als ein „übergeordneter Selektor“
• Michelle Barker -- :has() in Safari gelandet

Das obige ist der detaillierte Inhalt vonDas CSS: hat Selektor (und 4 Beispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!