CSS :lang() Pseudo Class
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¶
CSS Selectors
CSS Selectors Level 3
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>
 Pseudo Class){kind=link}
0 Comments
CAN FEEDBACK
Emoji