-1

I have Html structure below

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

I want to change height of container when experimental-bar-minimal class is called

I have used 

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

Can anybody help me out. Thanks in advance

:has is not working

mahil
  • 33
  • 9
  • @zer00ne yes calc is working fine if I am using for .experimental-border. Only problem is to select the parent and then adjacent selector – mahil Sep 25 '17 at 08:56

1 Answers1

2

There is no < Selector in CSS, and there is currently no option to style a parent element depending on one of its childs. At least not with vanilla CSS, I am not sure if this could be achieved with a preprocessor like Sass, Less or Stylus.

There acually is a > Selector, which selects only direct childs of the parent node. Please read the MDN Documentation for further info.

Ther actually is the :has pseudo class, which works like the code below, but it is currently not supported by any browsers:

.parent:has(> child) {
    /* Style Rules */
}
Matthias Seifert
  • 1,897
  • 2
  • 24
  • 35