CSS - How to apply css plus selector for child elements

Question

I try to apply a CSS style for child element of the body based on other div class in active states.

HTML:

<body class="restrict-body-scroll">
    <div class="main-wrapper">
        <div class="global-banner hide">GLOBAL BANNER ITEM HERE</div>
        <div class="alter-banner hide">ALTER BANNER ITEM HERE</div>
        <header class="header">
            <div class="item-left"></div>
            <div class="item-center"></div>
            <div class="item-right">
                <div class="overlay">
                    <div class="overlay-container">
                        <h3>Welcome Guest!</h3>
                    </div>
                </div>
            </div>
        </header>
    </div>
</body>

CSS: what I try -

.global-banner.hide{
    display:none !important;
}
.global-banner .item-right .overlay-container{
    height:0;
}
body.restrict-body-scroll .global-banner.hide + .header .item-right .overlay-container.active{
    height:100vh;
}

But its not working!

score 2 · Accepted Answer · answered Aug 30 '19 at 07:11

+ will select element that are placed immediately after selected elements: for your example you need ~

check snippet you will see both example.

.global-banner.hide {
  display: none !important;
}

.global-banner .item-right .overlay-container {
  height: 0;
}

body.restrict-body-scroll .item-center+.active {
  height: 100vh;
  color: red;
}

body.restrict-body-scroll .global-banner.hide~.header .item-right .overlay-container.active {
  font-size: 100px;
}

<body class="restrict-body-scroll">
  <div class="main-wrapper">
    <div class="global-banner hide">GLOBAL BANNER ITEM HERE</div>
    <div class="alter-banner hide">ALTER BANNER ITEM HERE</div>
    <header class="header">
      <div class="item-left"></div>
      <div class="item-center"></div>
      <div class="item-right active">
        <div class="overlay">
          <div class="overlay-container active">
            <h3>Welcome Guest!</h3>
          </div>
        </div>
      </div>
    </header>
  </div>
</body>

score 0 · Answer 2 · answered Aug 30 '19 at 07:06

+ is used as immediate sibling, for other siblings you need to use ~

.global-banner.hide{
    display:none !important;
}
.global-banner .item-right .overlay-container{
    height:0;
}
body.restrict-body-scroll .global-banner.hide ~ .header .item-right .overlay-container.active{
    height:100vh;
}

CSS - How to apply css plus selector for child elements

2 Answers2