Like the blog? Get the book »

Clean Up Empty Elements with CSS 3

Clean Up Empty Elements with CSS 3

By default, WordPress wraps HTML comments with paragraph tags:

<p><!-- --></p>

WordPress also employs various template tags that may, in certain situations, result in empty HTML elements such as paragraphs tags:

<p></p>
<p><!-- --></p>

Other cases where empty elements are generated by WordPress involve images, line breaks, nested lists and other complex markup scenarios.

Besides invalid markup, the problem with this is that your CSS may be applying styles to the empty elements, potentially breaking your layout or disrupting the presentational harmony of your design.

For specifically targeted elements, such as paragraph elements for navigational template tags, dealing with this issue is as simple as this:

#nav {
	display: none;
	}

Either that or you could get all “Google-homepage” and use nothing but style-neutral spans and divs to markup your content. Unfortunately neither of these solutions is effective at alleviating the occasional, unpredictable WordPress-generated empty paragraph elements.

Fortunately, the new :empty pseudo-selector of CSS 3 is the perfect solution for neutralizing all empty HTML elements. Here are some examples..

To neutralize all empty paragraphs (and only empty paragraphs), throw down the following slice of CSS goodness:

p:empty {
	display: none;
	}

Or, to cover your bases and hide all empty elements, add this bad boy to your stylesheet and enjoy complete satisfaction:

*:empty {
	display: none;
	}

In my opinion, this declaration should be included in all CSS reset stylesheets, but I will leave that decision up to you.

But..

Note that, for now, this technique only works in supportive browsers, which seems to be anything based on Mozilla. Unfortunately, Safari applies the rule to all elements of the specified element type. Hopefully this will be addressed in an upcoming version. And of course, Internet Explorer has absolutely no idea what we’re talking about here.

13 responses

  1. So, in safari with p:empty { display: none; }

    All paragraphs are hidden ? Is that what you’re saying ?

    And how does IE respond to this ? Ignoring ? Or bad interpretation :)

  2. And of course, Internet Explorer has absolutely no idea what we’re talking about here.

    lol… good article.

  3. Good trick! but Then it doesn’t work for safari?

    • Not for Safari 4 and below. But the empty selector is included in CSS3, so it should be only a matter of time before this method will work in Safari.

  4. I checked my css reference, Safari since 3.0 has full support of :empty.
    FF 3 has full support, but FF 2 and lower is buggy:

    • The selector body:empty always matches the body element.
    • The selector continues to match an element even after content has been added dynamically.

    And (this was strange to me) Opera have no support at all.

    • Yes, hopefully both Safari and Opera will be improving their support for this selector in upcoming versions.

      Thanks for the breakdown on how the selector is applied in different browsers.

  5. It had to be IE that doesn’t support it at all. Whats the Opera support like?

    • For now, Opera is hanging with IE on this one (i.e., no support), but as I have emphasized in previous comments, it is only a matter of time before all modern browsers support CSS3. Or so we hope ;)

  6. Very good article. I’m not sure if I like the fact that Safari decides to ignore the :empty part of the p:empty . Sure it might be just a matter of time till it gets fixed but then there’s still old versions out there. It’s one of the cool features that I feel could be really sweet in 5 years but for now I feel it’s just too risky to use if Safari is going to make your page hidden :)

    oh the joys of getting things validated…

  7. I tested it with IE8 and FF 3.5 and both see it.

    Thanx a lot!

  8. Problem is, that it won’t help with things like that:

    <p>&nbsp;</p>

    Other that that it sure is useful.

Comments are closed for this post. Contact us with any critical information.
Advertise Here

Sign up for the newsletter!

Never spam, only good stuff

Recent posts

Loading...

Random posts

Loading...
© 2009–2017 Digging Into WordPress Powered by WordPress Monzilla Media shapeSpace