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:
p#test *: select all elements in the paragraph with id="test":not(em): but not the <em> elements.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.
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.