8.2 The :lang Pseudo-class
The :lang pseudo-class allows you to construct selectors based on the language setting for specific tags. This class is useful in documents that must appeal to multiple languages and who will have different conventions for certain language constructs. A good place to start is with quotation marks. Different countries have different conventions for these. For example, while the English language uses speech marks like this: " ", the French language uses angle brackets like this: < >. In this case the :lang pseudo-class can be used to change the quote marks appropriately from within the CSS. Note that Internet Explorer 8 and above supports the this class only if a proper DOCTYPE is specified.
In the example below, the :lang class defines the quotation marks for <q> elements (inline quotations):
q:lang(no) {quotes: "~" "~"}
The quotation marks to be used at the beginning and end of any quotations are defined, perhaps rather confusingly, between english quotion marks. And the HTML would require a little extra markup like this:
<p>Some text <q lang="no">A quote in a sentence</q> Some more text.</p>
This will look like this in a browser:
Some text A quote in a sentence
Some more text.
The following example changes the quotes for the <q> tag appropriately for the language being used:
q:lang(en) {quotes: '"' '"'} q:lang(fr) {quotes: "<" ">"}
And in our HTML:
<p>Some text <q lang="en">A quote in a sentence</q> Some more text.</p> <p>Some text <q lang="fr">A quote in a sentence</q> Some more text.</p>
This will look like this in a browser:
Some text A quote in a sentence
Some more text.
Some text A quote in a sentence
Some more text.
The :lang selectors will apply to all elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.