Die Kraft von: Has () in CSS

Mitentwickler, lassen Sie uns in die aufregende Welt der CSS-Pseudoklasse eintauchen! Während :has() relativ neu ist, ist :has() unter Front-End-Entwicklern schnell zu einem Favoriten für seine Fähigkeit geworden, das Styling auf der Grundlage der internen Struktur eines Elements präzise zu steuern. Erforschen wir seine Funktionalität und praktische Anwendungen.

Verständnis :has()

Das :has() Pseudoklasse stilft elegant ein Element nur, wenn es bestimmte untergeordnete Elemente enthält. Betrachten Sie es als einen bedingten Stil: "Wenn dieses Element das enthält, dann style dieses Element."

syntax:

:has(<direct-selector>) {
  /* Styles applied if the direct selector is found within the parent */
}</direct-selector>

Lösen einer gemeinsamen Styling -Herausforderung

Vor dem Styling eines übergeordneten Elements, das ausschließlich auf der Präsenz seiner Kinder basiert, erforderte JavaScript. :has() elegant löst dies.

Betrachten Sie eine Blog -Postliste, bei der ein <h1></h1> (Titel) möglicherweise von einem <h2></h2> (Untertitel) folgt. Vielleicht möchten wir das <h1></h1> nur visuell hervorheben, wenn ein <h2></h2> direkt danach existiert. Vor :has() erforderte dies JavaScript.

Die alte (JavaScript) Art und Weise:

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

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

Dieser JavaScript -Code iteriert <h1></h1> Elemente, prüft nach einem folgenden <h2></h2> und fügt eine Klasse zum Styling hinzu.

Die neue (CSS) Art und Weise:

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

Dieses prägnante CSS erzielt das gleiche Ergebnis unter Verwendung von :has() und dem angrenzenden Geschwisterkombinator ( ). Es enthält nur das <h1></h1> blau, wenn ein <h2></h2> unmittelbar folgt.

praktische :has() Beispiele

Lassen Sie uns ein paar Szenarien untersuchen, in denen :has() leuchtet.

Beispiel 1:

html:

<h1>Lorem, ipsum dolor.</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>...</p>

<h1>This is a test</h1>
<p>...</p>

css:

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

Nur der erste <h1></h1> wird blau sein, weil es von einem <h2></h2>.

folgt

Beispiel 2: Styling -Bilder mit Bildunterschriften

oft arbeiten wir mit Bildern und Bildunterschriften. :has() kann die Bildpräsentation verbessern.

html:

<figure>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="The Power of :has() in CSS ">
  <figcaption>My Aunt Sally's Doggo</figcaption>
</figure>

css:

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

Dies enthält nur dann, wenn es ein <figure></figure>. <figcaption></figcaption> enthält

Browser -Unterstützung und Community -Nutzung

genießt breite Unterstützung in modernen Browsern (caniuse.com für detaillierte Browser -Kompatibilitätsinformationen). Das Feedback der Community zeigt kreative Verwendungen, einschließlich Verbesserungen der Zugänglichkeit. :has()

Wichtige Überlegungen:

• Spezifität: :has() erbt die Spezifität ihres spezifischsten internen Selektors.
• Browserkompatibilität: Ausfall von :has() wird kaskaden, es sei denn, in verzeihenden Selektoren wie :is() oder :where().
nisten:
• kann nicht innerhalb eines anderen :has(). :has() verschachtelt werden
Pseudo-Elemente: Pseudo-Elemente sind keine gültigen Selektoren in
• . :has()

Schlussfolgerung:

ist eine leistungsstarke Ergänzung zum CSS -Arsenal, das ein elegantes und effizientes Styling ermöglicht, das bisher auf JavaScript angewiesen ist. Durch das Verständnis seiner Fähigkeiten und Einschränkungen können wir unsere Fähigkeiten zur Webentwicklung erhöhen und robustere und wartbarere Code erstellen. :has()

Weitere Lesen:

• isha Deeds Artikel über: Has ()
• css-tricks on: Has ()
• Chrome Blog -Beitrag auf: Has ()
• css-tricks auf dem: Has () Selector

Das obige ist der detaillierte Inhalt vonDie Kraft von: Has () in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!