HTML and CSS Reference
In-Depth Information
Language Pseudo-Class :lang
Attribute selectors are often used to address values set for the common
lang
attribute
because designers very often need to set rules to quickly pick out one language or another
in a document. The
:lang()
pseudo-class performs the same thing as the
|=
selector.
Instead of writing
p[lang|="en"] { color: red; } /* English text in red */
we can write using a pseudo-class selector:
p:lang(en) { color: red; } /* English text in red */
This would style English paragraphs but not paragraphs that have no language specified or
a different value than an English variation:
<p lang="en">
This is English and red.
</p>
<p lang="en-uk">
This is British English and red.
</p>
<p>
Not red no lang specified.
</p>
<p lang="fr">
C'est Francais. (Not red)
</p>
Specification-wise, the pseudo-class approach is preferred, but for best support, you
might find that the older syntax is more widely implemented.
Negation Pseudo-Class :not
One of the most interesting pseudo-classes introduced by CSS3 is
:not()
, which is used to
reverse logic. For example,
p:not(.plain) {color: red;}
says that all paragraph tags not in class “plain” should be colored red. The
:not()
selector
takes simple parameters such as element type selectors, the wildcard selector, attribute
selectors,
id
selectors, class selectors, and most pseudo-classes besides itself. As a more
complex example, a rule like
#nav > a:not(:hover) {color: green;}
would select all links with an element called “nav” that are not being hovered over and set
them to be green. You can test these simple examples to see if your browser conforms to this
newer selector with the example at http://htmlref.com/ch4/not.html.
T
IP
Negative logic can be quite confusing. Beware of adding more complexity than you need to
using the
:not()
pseudo-class.
Now we are finished with selectors, but more selectors are expected any day now as
CSS3 continues to grow. We summarize the last group of selectors in Table 4-9. All of the
selectors are grouped together in one large table in Chapter 5 for reference purposes.
