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

Rate this post

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

If element with the id:


is present on the page, then hide following element:


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";



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:

Leave a Reply

Your email address will not be published.

Back to top button