Abakada: Back to Basics > Language References > CSS Properties > Pseudo-Classes > lang( ) Pseudo-class
Matches elements with a specified language value.
selector:lang( languagecode ) {
property: value
}
| languagecode |
A comma separated list of one or more strings that denote an element with a language value according to BCP47 language codes. |
| property |
Any valid CSS property. |
| value |
Any of the range of values available to the corresponding property. |
The :lang( ) pseudo-class applies styles to elements that match a specified language attribute value.
The language attribute value can be a two-letter primary language tag with no additional qualifiers, like de ( German ), or a primary language tag with a region subtag, like de-AT ( German for Austria ).
The syntax for using the :lang( ) pseudo-class is straightforward. A selector immediately precedes the pseudo-class.
For example, to set the style of <main> elements with a language value of fr ( French ):
main:lang( fr ) { background-color: beige }
which will apply the style to the element with a matching lang attribute.
<main lang="fr"> ... <main>
The following demonstrates use of the :lang( ) pseudo-class in an embedded stylesheet to set the style of elements of a given language on a page.