CSS :lang Selector
Last Updated :
29 Aug, 2024
Improve
The :lang Selector is used to target the element which is based on language attributes for a specific value. This selector work with the help of language-code.
Syntax:
:lang(lang-code) {
//property
}
Language Codes:
- en: for English.
- hi: for Hindi.
- fr: for French.
- de: for German
- it: for Italian
- ca: for Canadian
Example-1:
<!DOCTYPE html>
<html>
<head>
<style>
h3:lang(en) {
background: limegreen;
}
</style>
</head>
<body>
<h3 lang="en">"en" is lang-code for english.</h3>
</body>
</html>
Output:
Example-2: Language code apply on root element.
<!DOCTYPE html>
<html>
<head>
<style>
h3:lang(en) {
background: limegreen;
}
</style>
</head>
<body lang="en">
<h3>"en" is lang-code for English.</h3>
<h3>"fr" is lang-code for French.<h3>
<h3>"de" is lang-code for German.<h3>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Safari 3.1
- Opera 8.0
CSS :lang Selector – FAQs
What does the :lang selector do in CSS?
The :lang selector targets elements based on their language attribute, allowing for language-specific styling.
How can I style text differently for a specific language?
Use the :lang selector, like p:lang(en) { font-style: italic; }, to style paragraphs with a lang=”en” attribute.
Does :lang work with all HTML elements?
Yes, the :lang selector can be applied to any HTML element that can have a lang attribute.
Can the :lang selector be combined with other selectors?
Yes, :lang can be combined with other selectors, like h1:lang(fr) to target only French headings.
Is the :lang selector supported by all modern browsers?
Yes, the :lang selector is supported by all modern browsers.
