CSS/HTML: ul:empty selector won't match an empty list

Question

I have the following CSS and HTML code:

<ul id="actions" class="frame frame-yellowglow">
</ul>

CSS

ul#actions {
    clear: left;    
    width: calc(60% - 2px);
    margin: 5px auto;
    padding: 10px 0px;
    text-align: center;
}
ul#actions:empty {
    margin: 0;
    padding: 0;
}
ul#actions li {
    display: inline;
    margin: 0px 3px;
}
.frame {
    border-radius: 5px; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px #dddddd solid;
}
.frame:empty {
    border: none;
    box-shadow: none;
}
.frame-yellowglow {
    border: 1px #D4B700 solid;
    box-shadow: 0 0 4px #D4B700;
}

The ul is populated with icons for certain actions that can be performed. However, the ul does not match the :empty selector when empty and as such still renders; border, padding, shadow, and all.

[EDIT: To clarify, I'm talking here about when elements have not yet been added. Even when there's nothing within, it still doesn't match the :empty selector. ]

Why is this so?

Answer 1

According to MDN

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.

Your "empty" ul probably contains a whitespace text-node.