The :lang() pseudo-class matches an element based on the language it is determined to be in.
Any language determined in HTML uses a combination of the lang attribute (e.g <html lang="it">), the <meta> tag, and by information from the protocol (e.g HTTP headers).
The lang attribute value is a two-letter language code, like lang="it" for Italian, or two language codes combined, like lang="fr-ca" for Canadian French.
Using the :lang() selector, the type of quotation marks can be used for quotes in a page.
Version
Syntax
:lang() {
css declarations;
}
Example of the lang() selector with "fr" value for French:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:lang(fr) {
background: #1c87c9;
color: #eee;
}
</style>
</head>
<body>
<p>I am from France.</p>
<p lang="fr">Je m'appelle Ann</p>
</body>
</html>
In the following example, the :lang() pseudo-class is used to match the parents of quote elements using child combinators.
Example of the :lang() selector using child combinators.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
:lang(en) > q {
quotes: '\201C' '\201D' '\2018' '\2019';
}
:lang(fr) > q {
quotes: '« ' ' »';
}
</style>
</head>
<body>
<h2>:lang() selector example</h2>
<div lang="en">
<q>Lorem ipsum is simply dummy text</q>
</div>
<div lang="fr">
<q>Lorem ipsum is simply dummy text</q>
</div>
</body>
</html>
Browser support
4.0+ | 12.0+ | 2.0+ | 3.1+ | 10.0+ |
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.