16. April 2024

CSS „:has“ – der heimliche „parent-Selektor“

Ein weniger bekannter, aber in vielen Fällen sehr sinnvoller CSS-Selektor, ist die Pseudoklasse „:has“. So kann z.B. der Abstand nach Headlines, abhängig vom darauffolgenden Element gesteuert werden.

Ein konkretes Beispiel, das in der Praxis sehr häufig vorkommt: „Wenn auf eine Headline eine Subline folgt, soll der Abstand 0px sein, wenn aber Fließtext folgt, soll der Abstand 15px groß sein.“

<style>
h2{margin-bottom:15px;}
h2:has(+ h4){margin-bottom:0;}
h4{margin-bottom:25px;}
</style>

<div class="box">
<h2>Headline 2</h2>
<h4>Headline 4</h4>

<h2>Headline 2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>

Im folgenden Beispiel wird das :has-Element als eine Art parent-Selektor verwendet – so kann das Eltern-Element abhängig Child gestaltet werden. Konkret: „Wenn im div „box“ nur Text ist, soll der Innenabstand 20px betragen, wenn nur ein Bild in der Box ist, soll der Abstand 0 sein.“

<style>
.box{padding:20px; background:#fff; border:1px solid #aaa; margin-bottom:20px;}
.box:has(img){padding:0;}
</style>

<div class="box">
<p class="mb-0">In dieser Box ist nur Text. In der folgenden Box ist nur ein Bild.</p> 
</div>

<div class="box">
<img src="https://via.placeholder.com/1000x300">
</div>

Etwas deutlicher wird der Einsatz als „Parent-Selektor“ vielleicht noch in folgendem Beispiel:

*:has(.beispielklasse){background:red;}

Hier wird jedes Eltern-Element der „beispielklasse“ mit einem roten Hintergrund versehen.