Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 :empty pseudo class

CSS3 :empty pseudo class


I'm new and i have a question about CSS3 and :empty pseudo-class.

I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:

#my_sidebar:empty { display:none;}

For display it when isn't empty i wrote

#my_sidebar:not(:empty) { display:block; }

This is working but with chrome the sidebar appear only after one click on the page or on a link. Why? Can someone help me?

Thanks! (excuse me for my terryfing english!!)

EDIT: the html page:


Project Management

Mentis Project Management

and css:

.sidebar {
 width: 36%;
Problem courtesy of: Lic


The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).

As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)

Solution courtesy of: Pikadude No. 1


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 :empty pseudo class


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription