DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Clean Up Empty Elements with CSS 3

Posted by on

By default, WordPress wraps HTML comments with paragraph tags:

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 :)

    • In reply to your Safari question: exactly. (I just tried it.)

    • Yes, Safari 4 and earlier will hide all paragraph elements with that selector applied. Future versions should have this fixed (at least, I hope so).

  2. Peter Boosten October 1, 2009

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

    lol… good article.

  3. Alex Null October 1, 2009

    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. Caleb Kester October 7, 2009

    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. Contact us with any critical information. Thank you!

Code is poetry