Hide element via css when another element is present on the page

I want to hide an element if one element is already present on the page.

If element with the id:

#wcfmmp_store_about

is present on the page, then hide following element:

.left_sidebar.widget-area.sidebar

So I’ve found a solution how to do this via js. but I need to this via .css, if possible

var element =  document.getElementById('wcfmmp_store_about');

if (typeof(element) != 'undefined' && element != null)
{
 document.querySelector('.left_sidebar.widget-area.sidebar').style.display = "none";
} else {
 document.querySelector('.left_sidebar.widget-area.sidebar').style.display = "block";
}

Answer

Yes you can kind of do this. Here’s an example, but it is not full proof though.

This only works if .tohide follows directly after .item or if .tohide follows .item as a sibling.

.item + .tohide {
  display: none;
}

.item ~ .tohide {
  display: none;
}

<div class="item">item</div>
<div class="tohide">I show up when item is gone</div>

So in this example, if .item exists on the page, then .tohide is hidden. Go ahead and remove <div class="item">item</div> and run it and you will see that .tohide appears now. You can play with it in this jsfiddle: https://jsfiddle.net/qzu7hkcg/1/