Bootstrap4 on dropdown show change another parent level div property (CSS)

Question

Check this fiddle

I have a dropdown and when the dropdown is toggled, I want to change another div's background-color (div's with classes .main-content and .reqdiv is this case).

I have tried these selectors ~, >, + and I know these won't work in my case. Can anyone please suggest me how to solve this without using JS/JQuery.

.main-content {
  height: 200px;
  width: 100%;
  background: green;
}

.dropdown-menu {
  top: 35px!important;
}

.nav-btn.show~.main-content {
  background: blue;
}

.nav-btn.show>.main-content {
  background: blue;
}

.nav-btn.show+.main-content {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="nav-btn">
    <button class="btn dropdown-toggle " type="button" data-toggle="dropdown"><b>Language</b>
   <span class="caret"></span>
   </button>
    <ul class="dropdown-menu">
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JavaScript</a>
      </li>
    </ul>
  </div>
</div>
<div class="#reqdiv">
  //text
</div>
<div class="main-content">
</div>

score 0 · Answer 1 · answered Sep 16 '17 at 08:02

you want dropdown select then change background color in div

<select id="evt_color"> 
<option value="#3366CC">Blue</option> 
<option value="#E070D6">Fuchsia</option> 
<option value="#808080">Gray</option> 
<option value="#4bb64f">Green</option> 
<option value="#ed9d2b">Orange</option> 
<option value="#FF9CB3">Pink</option> 
<option value="#EA4A4A">Red</option> 
</select>
<div id="someDiv">Colour sample</div> 


 **Script**
$("#evt_color").change(function() {
    $("#someDiv").css("background-color", $(this).val());
}).change();

Example

score 0 · Answer 2 · answered Sep 16 '17 at 08:11

U can simply use specified css classes for changing a background. toggleClass can help on click.

$( "#button" ).on( "click", function() {
    $( ".main-content").toggleClass('blue');
});

.main-content{
    height:200px;
    width:100%;
    background:green;
}
.blue{background: blue}
.dropdown-menu{top:35px!important;}
.nav-btn.show ~ .main-content{background:blue;} 
.nav-btn.show > .main-content{background:blue;} 
.nav-btn.show + .main-content{background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="nav-btn">
   <button class="btn dropdown-toggle " id="button" type="button" data-toggle="dropdown"><b>Language</b>
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JavaScript</a>
      </li>
   </ul>
</div>
</div>
<div class="#reqdiv">
   //text
</div>
<div class="main-content">
</div>

So u have to change yours HTML. There is no way to select parent in pure CSS. Thats why the are 'cascade'. — Andreew4x4, Sep 16 '17 at 08:15

Andreew4x4 · Answer 3 · 2017-09-16T08:28:28.850

If u want to use only css u have to change yours html. So the background-color changing elements will be siblings to .nav-btn element. e.g:

.main-content{
    height:200px;
    width:100%;
    background:green;
}
.dropdown-menu{top:35px!important;}
.nav-btn.show ~ .main-content{background:blue;} 
.nav-btn.show > .main-content{background:blue;} 
.nav-btn.show + .main-content{background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-btn">
   <button class="btn dropdown-toggle " id="button" type="button" data-toggle="dropdown"><b>Language</b>
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JavaScript</a>
      </li>
   </ul>
</div>
<div class="#reqdiv">
   //text
</div>
<div class="main-content">
</div>

Yeah, but for my case i can't change like that. Drop-down is part of header and main-content is in content part. — Znaneswar, Sep 16 '17 at 09:56
So, sorry. U can't accomplish something like this with pure css. Go to https://stackoverflow.com/a/1014958/8615252 to read more. — Andreew4x4, Sep 16 '17 at 09:59

Bootstrap4 on dropdown show change another parent level div property (CSS)

3 Answers3