Comment changer la hauteur d'un autre conteneur selon différentes classes

Question

J'ai la structure Html ci-dessous

<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')"; } 

Je veux changer la hauteur du conteneur lorsque la classe-bar minimale expérimentale est appelé

Je l'ai utilisé

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')"; 
} 

Quelqu'un peut-il m'aider. Merci à l'avance

: a ne fonctionne pas

Answer 1

Il n'y a pas < sélecteur en CSS, et il n'y a actuellement aucune option de style un élément parent selon un de ses Childs. Au moins pas avec vanilla CSS, je ne suis pas sûr si cela pourrait être réalisé avec un préprocesseur comme Sass, Less ou Stylus.

Il existe un sélecteur >, qui sélectionne uniquement les enfants directs du noeud parent. Veuillez lire le MDN Documentation pour plus d'informations.

---

Ther est en fait la classe :has pseudo, qui fonctionne comme le code ci-dessous, mais il est actuellement not supported par tous les navigateurs:

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