complete css guide
Language selectors
Browser support
Get browser support information for langauge selectors in the downloadable version of this guide or our browser support tables.
Explanation
In HTML, the human language that an element is expressed in can be encoded in the web page. With CSS you can select elements on the basis of their human language encoding.
To specify the language of an element in HTML 4.0, you use the lang
attribute in the following way. If a paragraph is in a particular language, this is encoded as <p lang="language code">
where language code is usually a two character standard code for common languages. For example, French has the language code "fr", while Chinese the code "zh". The above examples would be <p lang="fr">
and <p lang="zh">
, for French and Chinese respectively. See the HTML 4 specification for more about the various language codes.
The language pseudo class selector allows developers to select elements encoded in a particular language.
Syntax
To select a particular element based on its language encoding, simply add :lang(language code)
to the selector for the element. For example, to select quotes in French, we have the selector q:lang(fr)
.
Use
Different languages have different formatting conventions, for cues such as use of italics and bold, indenting, quotation marks and so on. This selector allows one style sheet to describe how elements should appear in different languages. This way, a single style sheet could easily be shared by a multi-lingual organization or company.