HTML and CSS Reference
In-Depth Information
a combinator. Those restrictions may (indeed most likely will) be lifted in a post-Level
3 specification, but we can still do quite a lot even within the given constraints.
For example, let's flip around the previous example and select all elements with a
class of moreinfo that are not list items. This is illustrated in Figure 1-42 .
.moreinfo:not(li) {font-style: italic;}
Figure 1-42. Styling elements with a certain class that aren't list items
Translated into English, the selector would say, “Select all elements with a class whose
value contains the word moreinfo as long as they are not li elements.” Similarly, the
translation of li:not(.moreinfo) would be “Select all li elements as long as they do
not have a class whose value contains the word moreinfo .”
Technically, you can put a universal selector into the parentheses, but there's very little
point. After all, p:not(*) would mean “Select any p element as long as it isn't any
element” and there's no such thing as an element that is not an element. Very similar
to that would be p:not(p) , which would also select nothing. It's also possible to write
things like p:not(div) , which will select any p element that is not a div element—in
other words, all of them. Again, there is very little reason to do so.
You can also use the negation pseudo-class at any point in a more complex selector.
Thus to select all tables that are not children of a section element, you would write
*:not(section) > table . Similarly, to select table header cells that are not part of the
table header, you'd write something like table *:not(thead) > tr > th , with a result
like that shown in Figure 1-43 .
What you cannot do is nest negation pseudo-classes; thus, p:not(:not(p)) is invalid
and will be ignored. It's also, logically, the equivalent of simply writing p , so there's no
point anyway. Furthermore, you cannot reference pseudo-elements (which we'll cover
shortly) inside the parentheses, since they are not simple selectors.
On the other hand, it's possible to chain negations together to create a sort of “and also
not this” effect. For example, you might want to select all elements with a class of link
that are neither list items nor paragraphs.
*.link:not(li):not(p) {font-style: italic;}
That translates to “Select all elements with a class whose value contains the word
link as long as they are neither li nor p elements.”
Search WWH ::

Custom Search