Hiding an element that contains only spaces using CSS

Question

I am trying to hide the following element in an automatically generated HTML document:

Answer 1

The :empty selector is indeed very strict. An element containing a space is not considered empty. So there are two solutions

1. Modify the output. Trim the values you output or minimize the HTML, so those spaces are removed. Or even better: don't render those elements at all. I think that is the best option, because it both minimizes traffic and gives you a solution that works without Javascript.
2. Use Javascript to find those elements. I'm not aware of tricks that let you find these elements easily, so you may have to run through all elements, searching for ones you consider empty and add a class to those elements. This may be very slow, especially on low end devices. Also, it will only hide the elements once the script is run, so on page load the element will be visible for a short while until it is hidden. It may be clear that this isn't the ideal solution.

Maybe you can combine both. The :empty selector is a CSS3 selector and is not yet supported by IE8 and before, so a Javascript fallback might be a good idea for those browsers, unless you can fix the server side scripting so that the empty elements are not rendered at all, or are given your special class during rendering, so no Javascript is needed.