CSS :lang pseudo-class
CSS :lang Pseudo-Class
Description
The :lang pseudo-class specifies the language used within a given element.
This class is useful in documents that need to appeal to multiple languages, as different languages have different conventions for certain language structures. For example, French typically uses angle brackets (< and >) for quoting, while English uses quotation marks (‘ and ‘).
When defining pseudo-classes in blocks, keep in mind the following points:
- Pseudo-class names are case-insensitive.
-
Pseudo-classes are distinct from CSS classes, but can be combined.
Example
In documents that need to handle this difference, the :lang pseudo-class can be used to change the quotes accordingly. The following code changes the <blockquote> tag appropriately depending on the language used. −
<html>
<head>
<style type = "text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang = "fr">A quote in a paragraph</q>...</p>
</body>
</html>
This :lang selector applies to all elements in the document. However, not all elements use the quotes attribute, so for most elements, the effect will be transparent.