:empty

Supported by Mozilla and Safari.

The :empty pseudo-class selects empty elements, elements without any content.

div:empty {
	background-color: #000000;
	color: #ffffff;
}

Above this paragraph you see (or don't see) an empty div. I gave it a height so you can see its background color (or lack thereof).

The first div on the page gets a black background, too, and that's far more interesting. Initially it is empty, but onload, after the style assignments, I generate its content (last modified info and a link to my frameset when you're outside it).

So :empty could be used to select elements exclusively filled with generated content.

Dynamic content

When we add content to an empty element, it isn't empty any more (at least, that's what logic seems to dictate). Nonetheless the styles aren't removed.

Create content Remove content