Mastering the Power of CSS Selectors - CSS3 Foundations - page 47

You can use the :lang pseudo-class to declare styles based on the language of an element. Assume, for example, a
quote is in French, like this:
<blockquote>
<p lang=”fr”>Integer aliquet, lacus in ultricies venenatis, eros urna faucibus
tellus, sed sollicitudin.</p>
</blockquote>
The HTML specifies the quote is of a French language ( lang=”fr”) . To apply a style to only elements of French
language, you can use the following:
:lang(fr) {
color: blue;
}
:lang() isn't supported in Internet Explorer versions 6 and 7.
The Negation Pseudo-Class
The negation pseudo-class, :not() , allows you to select elements that do not represent its argument. As you saw
with the language pseudo-class, you can style an element if it matches a particular language, but what if you want to
style all languages except French? Rather than add each language code to the language pseudo-class, you can do the
following:
:not(:lang(fr)) {
color: blue;
}
Now all elements that aren't of the French language have blue text.
:not() isn't supported in Internet Explorer versions 6 and 7.
Pseudo-Elements
Pseudo-elements are parts of a web page that have physical form but aren't defined by an element—the first line of a
paragraph, for example.
Officially, a pseudo-element is made of two colons ( :: ) followed by the name of the element. When you use two
colons, pseudo-elements are visually distinguishable from pseudo-classes (with their one colon). However, using one
colon is also acceptable, so the choice is yours. I use just one colon throughout CSS3 Foundations.
Selecting the First Line
To select the first line of text, use the pseudo-element :first-line (or ::first-line if you're going with
two colons), like so:
p:first-line {
font-weight: bold;
}
Selecting the First Letter
To select the first letter, use the pseudo-element :first-letter , as shown in the following steps: