:not

Back to the index.

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

p#test *:not(em) {color: red}

This is the paragraph with class="test". It contains a span, a strong and an em.

The selector says the following:

So all children of the test paragraph should be red, except for the <em>.

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.

Dynamic content

What happens when we add elements to the test paragraph? Create an extra <strong>tag or an extra <em> tag to test it. All browsers handle this correctly.