Change CSS of another element

Question

I have 2 Views. I want to change Style of the 2nd Element when the first element is active WITHOUT Modifying the First Element

#sidebar.active {
  margin-left: 0 !important;
}   
#content{
  padding-right:100px;
}

These are the 2 elements. When the SideBar is active, i want the Content of the page to get a padding of 100px on the right without changing anything from the sidebar

I know what i could do this

#sidebar.active , ##content {
  margin-left: 0 !important;
  padding-right:100px;
}

But this would give the Sidebar also a padding of 100px which i dont want. I want to affect the CONTENT ONLY when the SideBar is Active. Any help is appreciated

To do this in pure css, your two elements have to be related in the DOM. Are they? And if so, how? Can you show us an example of their markup? — Taplar, Apr 09 '20 at 18:39
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Apr 09 '20 at 18:40

score 1 · Accepted Answer · answered Apr 09 '20 at 18:58

you could achive this with pure CSS, depending on your HTML markup.

Solution 1 (IF #content is right "next" to #sidebar in your HTML):

.container {
  display: block;
  margin: 10px;
}

#sidebar {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: red;
  display: inline-block;
  vertical-align: top;
  
  margin-left: 0;
}

#content {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}

#sidebar.active + #content {
  padding-right: 100px;
}

<div class="container">
  <div id="sidebar">
    INACTIVE sidebar
  </div>
  <div id="content">
    content
  </div>
 </div>

 <div class="container">
  <div id="sidebar" class="active">
    ACTIVE sidebar
  </div>
  <div id="content">
    content
  </div>
</div>

Solution 2 (IF #content is a child of #sidebar in your HTML):

.container {
  display: block;
  margin: 10px;
}

#sidebar {
  /* for demonstration */
  width: ;
  height: 50px;
  background-color: red;
  display: inline-block;
  vertical-align: top;

  margin-left: 0;
}

#content {
  /* for demonstration */
  width: 100px;
  height: 50px;
  background-color: orange;
  display: inline-block;
  vertical-align: top;
}

#sidebar.active #content {
  padding-right: 100px;
}

<div class="container">
  <div id="sidebar">
    INACTIVE sidebar

    <div id="content">
      content
    </div>
  </div>
</div>

<div class="container">
  <div id="sidebar" class="active">
    ACTIVE sidebar
    <div id="content">
      content
    </div>
  </div>
</div>

Change CSS of another element

1 Answers1