CSS :has() Pseudo-Klasse: Ein leistungsstarker Selektor für dynamisches Styling

CSS wird ständig weiterentwickelt, um Entwicklern die einfache Erstellung dynamischer, intuitiver und optisch ansprechender Webseiten zu ermöglichen. Eine solche Erweiterung ist die Pseudoklasse :has(), die im modernen CSS eingeführt wurde. Diese Pseudoklasse bietet eine übergeordnete Auswahlfunktion, die es Ihnen ermöglicht, Stile abhängig vom Vorhandensein oder Zustand von untergeordneten oder Geschwisterelementen anzuwenden.

In diesem Artikel wird die Pseudoklasse :has() anhand eines Beispiels erläutert, um ihre Flexibilität und Leistungsfähigkeit zu demonstrieren.

Was ist die Pseudoklasse :has()?

Die Pseudoklasse :has() wird oft als „Elternselektor“ bezeichnet, da sie es Ihnen ermöglicht, ein Element basierend auf seinen untergeordneten, Geschwistern oder Nachkommen zu formatieren.

selector:has(selectorList)

• Selektor ist das Hauptelement, für das die Regel gilt.
• selectorList ist die Bedingung, die Kinder, Geschwister oder andere Elemente im Zusammenhang mit dem Hauptelement enthalten kann.

Hauptfunktionen

• Übergeordnetes Bewusstsein: Stile werden auf ein Element basierend auf seinen Nachkommen oder Geschwistern angewendet.
• Flexible Bedingungen: Funktioniert mit Kombinatoren wie , ~ und > für Geschwister- und Kinderbeziehungen.
• Verbesserte Interaktivität: Nützlich zum Erstellen dynamischer Layouts oder Effekte, ohne auf JavaScript angewiesen zu sein.

Praktisches Beispiel: Verwenden von :has() zum Stylen einer Box basierend auf ihrem Geschwistermodell

body {
  font-family: sans-serif;
}

.box {
  width: 50px;
  height: 40px;
  background-color: red;
  margin: 5px;
}

.border {
  border: 2px solid black;
}

.circle {
  width: 40px;
  height: 40px;
  background-color: blue;
  border-radius: 25px;
}

/* Highlighting boxes that are followed by a circle */
.box:has(+ .circle) {
  width: 80px;
  height: 80px;
}

  
    <title>CSS :has() Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
  
  
    <div>



<p><strong>Explanation</strong></p>

<p><em>Basic Styles</em><br>
        The .box class defines small red rectangles with a margin.<br>
        The .circle class creates blue circular elements.</p>

<p>Dynamic Sizing Using :has():<br>
        The rule .box:has(+ .circle) applies styles to any .box element that is immediately followed by a .circle.<br>
        This rule changes the dimensions of such .box elements to 80px by 80px, making them stand out.</p>

<p><em>Visual Output</em></p>

<p>Initially, the boxes are uniform in size.<br>
The .box element immediately preceding a .circle grows larger due to the :has() rule.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173495132393104.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSS :has() Pseudo-Class: A Powerful Selector for Dynamic Styling"></p>
<h2>
  
  
  Use Cases for :has()
</h2>

<p>The :has() pseudo-class is versatile and can be applied in numerous scenarios:</p>
<h3>
  
  
  1. <strong>Interactive Layouts</strong>
</h3>

<p>Style a parent element based on the presence of a specific child or sibling element, e.g., highlighting a card if it contains a button.<br>
</p>

<pre class="brush:php;toolbar:false">.card:has(button) {
  border: 2px solid green;
}

2. Dynamische Navigationsmenüs

Stile auf ein übergeordnetes Element anwenden

wenn es ein Dropdown-Menü enthält.

li:has(ul) {
  font-weight: bold;
}

3. Formularvalidierung

Heben Sie ungültige Eingabefelder basierend auf gleichgeordneten oder übergeordneten Elementen hervor.

.form-group:has(input:invalid) {
  border-color: red;
}

4. Benutzerdefinierte Geschwisterbeziehungen

Stilisieren Sie ein Element basierend auf seinem benachbarten Geschwisterelement.

h1:has(+ p) {
  margin-bottom: 10px;
}

Vorteile von :has()

1. Verbessert die Lesbarkeit:

   • Reduziert den Bedarf an komplexem JavaScript zum Erkennen und Bearbeiten des DOM.

2. Steigert die Leistung:

   • Leicht und effizient im Vergleich zu JavaScript-Lösungen für ähnliche Effekte.

3. Vereinfacht CSS:

   • Ermöglicht deklaratives Styling für komplexe Beziehungen und minimiert zusätzliche Klassen oder Attribute.

---

Browser-Unterstützung

Ab sofort wird die Pseudoklasse :has() von den meisten modernen Browsern unterstützt, einschließlich:

• Chrome: 105
• Kante: 105
• Safari: 15,4
• Firefox: Unterstützung wird derzeit geprüft.

Für ältere Browser benötigen Sie möglicherweise ein Fallback oder Polyfill.

---

Abschluss

Die Pseudoklasse :has() ist ein Game-Changer im modernen CSS und bringt die lang erwartete Funktion zur Elternauswahl mit sich. Mit seiner Fähigkeit, Elemente basierend auf ihren Beziehungen bedingt zu formatieren, vereinfacht es CSS-Code, verbessert dynamisches Styling und reduziert die Abhängigkeit von JavaScript für die DOM-Manipulation.

Entdecken Sie die Pseudoklasse :has() in Ihren Projekten und erschließen Sie neue Möglichkeiten für kreative und effiziente Webdesigns!