CSS Pseudo-class :lang

Description:

The :lang pseudo-class is used to specify a language to use in a specified element.

This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').

While defining pseudo-classes in a <style>...</style> block, following points should be taken care:

• Pseudo-class names are not case-sensitive.

• Pseudo-class are different from CSS classes but they can be combined.

Example:

In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used:

<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
<p>...<q lang="fr">A quote in a paragraph</q>...</p>

     

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.