Clean Up Empty Elements with CSS 3

Posted by Jeff Starr • Updated on February 6th, 2017

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 ↓

About the author

Jeff Starr is a professional web developer and book author with over 15 years of experience. Jeff works with WordPress every day, designing themes, developing plugins, and securing sites. His books include Digging Into WordPress, WordPress Themes In Depth, and The Tao of WordPress.

View all from Jeff Starr

← Easy Shortcode Permalinks

Five Ways to Change Your WordPress Password →

13 responses

Cinq

October 1, 2009 @ 6:26 am

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 :)
- Jessi Hance
  
  October 1, 2009 @ 9:40 am
  
  In reply to your Safari question: exactly. (I just tried it.)
- Jeff Starr Post Author
  
  October 5, 2009 @ 4:46 pm
  
  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).
Peter Boosten

October 1, 2009 @ 8:46 am

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

lol… good article.
Alex Null

October 1, 2009 @ 11:16 am

Good trick! but Then it doesn’t work for safari?
- Jeff Starr Post Author
  
  October 5, 2009 @ 4:48 pm
  
  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.
Hassan

October 1, 2009 @ 1:33 pm
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.
- Jeff Starr Post Author
  
  October 5, 2009 @ 4:50 pm
  
  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.
Daniel Groves

October 3, 2009 @ 11:47 am

It had to be IE that doesn’t support it at all. Whats the Opera support like?
- Jeff Starr Post Author
  
  October 5, 2009 @ 4:51 pm
  
  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 ;)
Caleb Kester

October 7, 2009 @ 2:43 pm

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…
Vincent

October 19, 2009 @ 6:13 pm

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

Thanx a lot!
Dan

December 14, 2009 @ 11:41 am

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

<p> </p>

Other that that it sure is useful.