Hiding Div when Empty through CSS when using a certain style

Question

I want to hide div when it is empty, through CSS, preferably, but I already applied a style that I don't want to sacrifice.

Here is my code rendered as:

<div class="auto-style2"></div>

Here is my second style:

.auto-style2 {
    width: 1100px;
    height: 200px;
    overflow-y: scroll;
    border:1px solid #d3d3d3;
}

I tried: empty-cells: hide;, but that didn't work.

The link below recommended, div:empty { display: none };

But since my div is already using a different style, I would think that it would have to be done through that style only; I think it is going to ignore div:empty; because the second is applied to my div.

Related: How to hide/remove a DIV when empty

Answer 1

You can use:

`.auto-style2:empty { display: none }`

This will work along with your existing .auto-style2{...}.

Note: For empty to work, it has to be literally empty. If there any visible white spaces it wont work.

.auto-style1 {
    width: 1100px;
    height: 200px;
    overflow-y: scroll;
    border:1px solid #d3d3d3;
}

.auto-style1:empty{
  display:none;
}

.auto-style2 {
    width: 1100px;
    height: 200px;
    overflow-y: scroll;
    border:1px solid #d3d3d3;
}

.auto-style2:empty{
  display:none;
}

.auto-style1 shows up cause of white spaces.
<div class="auto-style1"> </div>

.auto-style2 is hidden below this line.
<div class="auto-style2"></div>

Answer 2

You can give the div an #ID and then do:

ID:empty{display: None}