Die Macht von :has() in CSS

Hallo, liebe Entwickler da draußen! In diesem Beitrag werden wir die Verwendung von :has() in Ihrem nächsten Webprojekt untersuchen. :has() ist relativ neu, hat aber in der Frontend-Community an Popularität gewonnen, da es Kontrolle über verschiedene Elemente in Ihrer Benutzeroberfläche bietet. Lassen Sie uns einen Blick darauf werfen, was die Pseudoklasse ist und wie wir sie nutzen können.

Syntax

Die CSS-Pseudoklasse :has() hilft dabei, ein Element zu stylen, wenn eines der Dinge, nach denen wir darin suchen, gefunden und berücksichtigt wird. Es ist, als würde man sagen: „Wenn sich etwas Bestimmtes in dieser Box befindet, dann stylen Sie die Box auf diese Weise UND nur auf diese Weise.“

:has(<direct-selector>) {
  /* ... */
}

„Die funktionale CSS-Pseudoklasse :has() repräsentiert ein Element, wenn irgendeiner der relativen Selektoren, die als Argument übergeben werden, mindestens ein Element findet, wenn er gegen dieses Element verankert wird. Diese Pseudoklasse bietet eine Möglichkeit, ein übergeordnetes Element oder ein vorheriges Geschwisterelement in Bezug auf ein Referenzelement auszuwählen, indem eine Liste relativer Selektoren als Argument genommen wird.“

Für eine umfassendere Erklärung, MDN macht es perfekt MDN

Das Styling-Problem

In den vergangenen Jahren hatten wir keine Möglichkeit, ein übergeordnetes Element basierend auf einem direkten Kindelement dieses übergeordneten Elements mit CSS oder ein Element basierend auf einem anderen Element zu stylen. Falls wir das tun mussten, hätten wir JavaScript verwenden und Klassen ein- und ausschalten müssen, basierend auf der Struktur des HTML. :has() hat dieses Problem gelöst.

Nehmen wir an, Sie haben ein Überschriftenelement der Ebene 1 (h1), das der Titel eines Beitrags oder etwas Ähnliches auf einer Blog-Listen-Seite ist, und dann haben Sie eine Überschrift der Ebene 2 (h2), die direkt danach folgt. Diese h2 könnte eine Unterüberschrift für den Beitrag sein. Wenn diese h2 vorhanden, wichtig und direkt nach der h1 ist, möchten Sie vielleicht, dass diese h1 hervorsticht. Zuvor hätten Sie eine JS-Funktion schreiben müssen.

Althergebrachte Methode – JavaScript

const h1Elements = document.querySelectorAll('h1');

h1Elements.forEach((h1) => {
  const h2Sibling = h1.nextElementSibling;
  if (h2Sibling && h2Sibling.tagName.toLowerCase() === 'h2') {
    h1.classList.add('highlight-content');
  }
});

Diese JS-Funktion sucht nach allen h1s, denen eine h2 vorausgeht, und wendet eine Klasse von highlight-content an, um die h1 als wichtigen Artikel hervorzuheben.

Neu und verbessert mit modernem CSS, das gerade ankommt! Die Möglichkeiten dessen, was wir im Browser tun können, haben sich stark weiterentwickelt. Wir können jetzt CSS nutzen, um Dinge zu tun, die wir traditionell mit JavaScript machen mussten, nicht alles, aber einiges.

Neue Schulmethode – CSS

h1:has(+ h2) {
    color: blue;
}

Wirf ein bisschen :has() drauf!

Jetzt können Sie :has() verwenden, um dasselbe zu erreichen, was die JS-Funktion getan hat. Dieses CSS prüft auf jede h1 und verwendet den Geschwister-Kombinator, um eine unmittelbar folgende h2 zu prüfen, und fügt der Textfarbe Blau hinzu. Nachfolgend finden Sie einige Anwendungsfälle, bei denen :has() nützlich sein kann.

:has-Selektor Beispiel 1

HTML

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>
	
<!-- WITHOUT HAS BELOW -->

<h1>This is a test</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, odio voluptatibus est vero iste ad?</p>

CSS

h1:has(+ h2) {
    color: blue;
}

:has-Selektor Beispiel 2

Oft manipulieren oder arbeiten wir Web-Worker mit Bildern. Wir könnten Werkzeuge verwenden, die Cloudinary zur Verfügung stellt, um verschiedene Transformationen unserer Bilder zu nutzen, aber normalerweise möchten wir Schatten, abgerundete Ecken und Bildunterschriften (nicht zu verwechseln mit alternativen Texten im alt-Attribut) hinzufügen.

Das folgende Beispiel verwendet :has(), um zu prüfen, ob eine Abbildung oder ein Bild ein figcaption-Element hat, und wenn ja, wendet es einen Hintergrund und einen abgerundeten Radius an, um das Bild hervorzuheben.

HTML

<section>
  <figure>
    <img src="https://placedog.net/500/280" alt="My aunt sally's dog is a golden retreiver." />
    <figcaption>My Aunt Sally's Doggo</figcaption>
  </figure>
</section>

CSS

figure:has(figcaption) {
  background: #c3baba;
  padding: 0.6rem;
  max-width: 50%;
  border-radius: 5px;
}

Kann ich das :has()en?

Sie können sehen, dass :has() eine hervorragende Unterstützung in modernen Browsern hat.

:has() in der Community!

Ich habe mich an mein Netzwerk auf Twitter gewandt, um zu sehen, wie meine Kollegen :has() in ihrer täglichen Arbeit verwenden, und das ist, was sie dazu zu sagen hatten.

„Ein Beispiel, das ich habe, ist das Stylen einer bestimmten SVG aus einem Drittanbieterpaket in @saucedopen, weil ich sie nicht direkt stylen konnte.“

Das hat Nick Taylor von OpenSauced zu der Verwendung von :has() zu sagen.

svg:has(> #Mail) {
  stroke-width: 1;
}

Lol, das letzte Mal, als ich es benutzte, baute ich eine Tastaturfunktionalität in eine Baumansicht ein, also musste ich Zustände und Klassen von Geschwisterelementen erkennen, aber es war noch nicht in Firefox vorhanden, also musste ich eine andere Lösung finden. 🫠

Abbey Perini von Nexcor Food Safety Technologies, Inc.

Es ist großartig zu sehen, wie Community-Mitglieder moderne CSS verwenden, um reale Probleme zu lösen, und auch ein Gruß an Abbey, die es aus Gründen der Barrierefreiheit nutzt!

Dinge, die man beachten sollte

Es gibt einige wichtige Punkte, die man bei der Verwendung von :has() beachten sollte. Stichpunkte entnommen von MDN.

• Die Pseudoklasse übernimmt die Spezifität des spezifischsten Selektors in ihrem Argument
• Wenn die Pseudoklasse :has() selbst in einem Browser nicht unterstützt wird, schlägt der gesamte Selektorblock fehl, es sei denn, :has() befindet sich in einer fehlertoleranten Selektorliste, wie z. B. in :is() und :where()
• Die Pseudoklasse :has() kann nicht in eine andere :has() verschachtelt werden 
• Pseudo-Elemente sind ebenfalls keine gültigen Selektoren innerhalb von :has() und Pseudo-Elemente sind keine gültigen Anker für :has()

Fazit

Die Macht von CSS zu nutzen, einschließlich fortgeschrittener Funktionen wie der Pseudoklasse :has(), befähigt uns, außergewöhnliche Web-Erlebnisse zu gestalten. Die Stärken von CSS liegen in seiner Kaskade und Spezifität… das Beste daran ist, dass wir sein volles Potenzial ausschöpfen können. Indem wir die Fähigkeiten von CSS nutzen, können wir das Webdesign und die Entwicklung vorantreiben, neue Möglichkeiten erschließen und bahnbrechende Benutzeroberflächen schaffen.

Links

• https://ishadeed.com/article/css-has-parent-selector/
• https://css-tricks.de/almanac/selectors/h/has/
• https://developer.chrome.com/blog/has-m105/#forms
• https://css-tricks.de/the-css-has-selector/