JoeScott1232 JoeScott1232 - 2 years ago 85
CSS Question

Css3 :empty selector acting strange with multiple class divs

I'm having problems trying to use the css3 :empty selector. My goal is to only display the contents of children .showme div when the parent .showhim div is hovered. Only when there is content to show. (Within the .showme-wrapper div).

However the fiddle below shows the .showme-wrapper displays even though it shouldn't because it empty:

https://jsfiddle.net/jzcm9uen/3/

If any anyone could help me hide this .showme-wrapper when it is empty, I'd be so grateful!

Code:



.showme {
width: 150px;
overflow: hidden;
padding: 0px;
min-height: 0px;
max-height: 0px;
opacity: 0;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
}

.showme-wrapper {
display: block;
width: 168px;
height: initial;
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}

.showme-wrapper:empty {
display: none;
}

.showhim:hover .showme {
height: auto;
max-height: 100px;
opacity: 1;
}

<div class="dropdown showhim">
<p class="sidebar-title">I shouldn't show</p>
<div class="showme">
<div class="showme-wrapper">
</div>
</div>
</div>

<div class="dropdown showhim">
<p class="sidebar-title">I should show</p>
<div class="showme">
<div class="showme-wrapper">
<p >Content</p>
</div>
</div>
</div>




Answer Source

From MDN

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

You have whitespace between <div class="showme-wrapper"> and </div>. You'll need to remove it for the element to be considered :empty.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download