HTML and CSS Reference
In-Depth Information
…in HTML, the language is determined by a combination of the
lang
attribute, and
possibly information from the
meta
elements and the protocol (such as HTTP headers).
XML uses an attribute called
xml:lang
, and there may be other document language-
specific methods for determining the language.
The pseudo-class will operate on all of that information, whereas the attribute selector
can only work if there is a
lang
attribute present in the element's markup. Therefore,
the pseudo-class is more robust than the attribute selector and is probably a better
choice in most cases where language-specific styling is needed.
The Negation Pseudo-Class
Every selector we've covered thus far has had one thing in common: they're all positive
selectors. In other words, they are used to identify the things that should be selected,
thus excluding by implication all the things that don't match and are thus not selected.
For those times when you want to invert this formulation and select elements based on
what they are
not
, Selectors Level 3 introduced the negation pseudo-class,
:not()
. It's
not quite like any other selector, fittingly enough, and it does have some restrictions
on its use, but let's start with an example.
Let's suppose you want to apply a style to every list item that doesn't have a
class
of
moreinfo
, as illustrated in
Figure 1-41
. That used to be very difficult, and in certain
cases impossible, to make happen. Now:
li:not(.moreinfo) {font-style: italic;}
Figure 1-41. Styling list items that don't have a certain class
The way
:not()
works is that you attach it to an element, and then in the parentheses
you fill in a simple selector. A simple selector, according to the W3C, is:
…either a type selector, universal selector, attribute selector, class selector, ID selector,
or pseudo-class.
Note the “either” there: you can only use one of those inside
:not()
. You can't group
them and you can't combine them using combinators, which means you can't use a
descendant selector, because the space separating elements in a descendant selector is
