Wie Höhe eines anderen Behälters ändern nach verschiedenen Klassen

Question

Ich habe HTML-Struktur unter

<div> 
    <div class="experimental-bar experimental-bar-minimal"></div> 
</div> 
<div class="experimental-border"> 
    <div class="container"></div> 
</div> 

CSS:

.experimental-bar { height: 50px; } 
.experimental-bar-minimal {height: 25px; } 

.container { height: ~"calc('100vh - 50px')"; } 

Ich mag Höhe des Behälters ändern, wenn experimental-Bar-minimal-Klasse genannt

ich habe

verwendet

div:has(.experimental-bar) + .experimental-border .f8-wi-container { 
    height: ~"calc('100vh - 50px')"; 
} 
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container { 
    height: ~"calc('100vh - 25px')"; 
} 

Kann helfen jemand mir heraus. Vielen Dank im Voraus

: hat nicht funktioniert

Answer 1

Es gibt keinen < Selector in CSS, und es gibt derzeit keine Möglichkeit, ein übergeordnetes Element, um Stil in Abhängigkeit von einem seines Childs. Zumindest nicht mit Vanille-CSS, sie ist nicht sicher, ob dies mit einem Prä-Prozessor wie Sass, weniger oder Stylus erreicht werden kann.

acually Es ist ein > Selector, die Direkt Childs des Elternknotens auswählt. Bitte lesen Sie die MDN Documentation für weitere Informationen.

---

Ther ist eigentlich die :has Pseudo-Klasse, die unten wie der Code funktioniert, aber es ist derzeit not supported von allen Browsern:

.parent:has(> child) { 
    /* Style Rules */ 
}