:not and :empty

On this page I describe two Mozilla proprietary pseudo-classes.

:not

The :not pseudo-class serves to negate part of a selector.

p.test *:not(code) {text-decoration: underline;}

This is the paragraph with class="test". I added a span for good measure. All HTML elements inside this paragraph are underlined (p.test *), but not the code elements (:not(code)).

The :not syntax is certain to be tricky. I wrote the example on this page, but I have no idea how to write more complex selectors. This pseudo-class needs more study.

I could have left out the * but included it anyway to make the code example clearer.

:empty

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.