Hallo an alle wunderbaren Entwickler da draußen! In diesem Beitrag werden wir die Verwendung von untersuchen :has() in Ihrem nächsten Webprojekt. :has() ist relativ neu, erfreut sich jedoch in der Front-End-Community großer Beliebtheit, da es die Kontrolle über verschiedene Elemente in Ihrer Benutzeroberfläche ermöglicht. Werfen wir einen Blick darauf, was die Pseudoklasse ist und wie wir sie nutzen können.

Syntax

Das :has() Die CSS-Pseudoklasse hilft dabei, ein Element zu formatieren, wenn eines der darin gesuchten Dinge gefunden und berücksichtigt wird. Es ist, als würde man sagen: „Wenn sich in dieser Box etwas Bestimmtes befindet, dann gestalten Sie die Box so UND nur so.“

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

„Das Funktionale :has() Die CSS-Pseudoklasse stellt ein Element dar, wenn einer der relativen Selektoren, die als Argument übergeben werden, mit mindestens einem Element übereinstimmt, wenn er an diesem Element verankert ist. Diese Pseudoklasse stellt eine Möglichkeit dar, ein übergeordnetes Element oder ein vorheriges Geschwisterelement in Bezug auf ein Referenzelement auszuwählen, indem eine relative Auswahlliste als Argument verwendet wird.“

Für eine fundiertere Erklärung: DND macht es perfekt

Das Styling-Problem

In den vergangenen Jahren hatten wir keine Möglichkeit, ein übergeordnetes Element, das auf einem direkten untergeordneten Element dieses übergeordneten Elements basierte, oder ein Element, das auf einem anderen Element basierte, mit CSS zu formatieren. Für den Fall, dass wir das tun müssten, müssten wir etwas JavaScript verwenden und Klassen basierend auf der Struktur des HTML ein-/ausschalten. :has() hat dieses Problem gelöst.

Nehmen wir an, Sie haben ein Element der Überschriftenebene 1 (h1), das ist der Titel eines Beitrags oder etwas Ähnliches auf einer Blog-Listenseite, und dann haben Sie eine Überschrift der Ebene 2 (h2), die direkt darauf folgt. Dieses h2 könnte eine Unterüberschrift für den Beitrag sein. Wenn das h2 ist vorhanden, wichtig und direkt nach dem h1, möchten Sie vielleicht, dass h1 hervorsticht. Vorher hätte man eine JS-Funktion schreiben müssen.

Old School Way – 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 h1, die ein haben h2 Fahren Sie damit fort und wenden Sie eine Klasse von Highlight-Inhalten an, um das zu erstellen h1 als wichtiger Artikel hervorstechen.

Neu und verbessert mit modernem CSS, das immer beliebter wird! Die Möglichkeiten dessen, was wir im Browser tun können, haben einen langen Weg zurückgelegt. Wir können CSS jetzt nutzen, um Dinge zu tun, die wir traditionell mit JavaScript tun müssten, nicht alles, aber einige Dinge.

Neuer Schulweg – CSS

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

Werfen Sie etwas :has() darauf!

Jetzt können Sie verwenden :has() um dasselbe zu erreichen wie die JS-Funktion. Dieses CSS sucht nach h1 und verwendet das Geschwisterkombinator sucht nach einem h2, das unmittelbar darauf folgt, und fügt dem Text die Farbe Blau hinzu. Im Folgenden finden Sie einige Anwendungsfälle für wann :has() kann nützlich sein.

: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>
	
	<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>

	<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

Als Mitarbeiter im Internet manipulieren oder arbeiten wir häufig mit Bildern. Wir könnten Werkzeuge verwenden, die Cloudinary bietet die Möglichkeit, verschiedene Transformationen für unsere Bilder zu nutzen, aber normalerweise möchten wir Schlagschatten, Rahmenradien und Beschriftungen hinzufügen (nicht zu verwechseln mit alternativem Text in einem Alt-Attribut).

Das folgende Beispiel verwendet :has() um zu sehen, ob eine Figur oder ein Bild über ein figcaption-Element verfügt. Wenn dies der Fall ist, werden ein Hintergrund und ein Randradius angewendet, 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 :has() dass?

Sie können sehen, dass :has() bietet hervorragende Unterstützung für alle modernen Browser.

:has() in der Gemeinschaft!

Ich habe mein Netzwerk auf Twitter kontaktiert, um zu sehen, wie meine Kollegen es nutzen :has() in ihrer täglichen Arbeit und das sagen sie dazu.

„Ein Beispiel, das ich habe, ist das Stylen einer bestimmten SVG-Datei aus einem Paket eines Drittanbieters @saucedopen weil ich es nicht direkt stylen konnte.“

Das ist was Nick Taylor für OpenSauced musste über die Verwendung sagen :has().

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

Lol, als ich es das letzte Mal verwendet habe, habe ich Tastaturfunktionen in eine Baumansicht integriert, also musste ich Zustände und Klassen von Geschwisterelementen erkennen, aber es war noch nicht in Firefox, also musste ich eine andere Lösung finden. 🫠

Abtei Perini für Nexcor Food Safety Technologies, Inc.

Es ist großartig zu sehen, wie Community-Mitglieder modernes CSS verwenden, um Probleme der realen Welt zu lösen, und ein Dankeschön an Abbey, das es aus Gründen der Barrierefreiheit verwendet!

Dinge im Auge zu halten

Bei der Verwendung sind einige wichtige Punkte zu beachten :has() Aufzählungspunkte, auf die verwiesen wird von MDN.

• Die Pseudoklasse übernimmt die Spezifität des spezifischsten Selektors in ihrem Argument
• Besitzt das :has() Wenn die Pseudoklasse selbst in einem Browser nicht unterstützt wird, schlägt der gesamte Selektorblock fehl, es sei denn :has() befindet sich in einer verzeihenden Auswahlliste, z. B. in :is() und :where()
• Das :has() Eine Pseudoklasse kann nicht in einer anderen verschachtelt werden :has() 
• Pseudoelemente sind auch keine gültigen Selektoren innerhalb :has() und Pseudoelemente sind keine gültigen Anker für :has()

Zusammenfassung

Nutzen Sie die Leistungsfähigkeit von CSS, einschließlich erweiterter Funktionen wie :has() Pseudo-Klasse ermöglicht es uns, außergewöhnliche Web-Erlebnisse zu schaffen. Die Stärken von CSS liegen in seiner Kaskade und Spezifität … und das Beste daran ist, dass wir sein volles Potenzial ausschöpfen können. Indem wir die Möglichkeiten von CSS nutzen, können wir Webdesign und -entwicklung vorantreiben, neue Möglichkeiten erschließen und bahnbrechende Benutzeroberflächen erstellen.

Links:

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• PlatoHealth. Informationen zu Biotechnologie und klinischen Studien. Hier zugreifen.
• Quelle: https://css-tricks.com/the-power-of-has-in-css/