CSS :lang() Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :lang() selector in CSS allows you to apply styles based on the language attribute of an HTML element.

This is particularly useful when you need to provide specific styling for different languages, improving accessibility and enhancing the user experience in multilingual websites.

💡 Syntax

The signature of the :lang() Selector is as follows:

Syntax

Copied

:lang(language-code) {
    /* CSS properties */
}

The :lang() function accepts language codes (such as en for English, fr for French, etc.) that correspond to the lang attribute in HTML elements. You can also specify multiple language codes by separating them with commas.

📝 Example

Here is an example of how to use the :lang() selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :lang() Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p lang="en">This is an English paragraph.</p>
    <p lang="fr">Ceci est un paragraphe en français.</p>
    <p lang="es">Este es un párrafo en español.</p>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for English content */
:lang(en) {
    color: blue;
    font-family: Arial, sans-serif;
}

/* Style for French content */
:lang(fr) {
    color: red;
    font-family: "Courier New", Courier, monospace;
}

/* Style for Spanish content */
:lang(es) {
    color: green;
    font-family: "Georgia", serif;
}

In this example:

Paragraphs in English are styled with a blue font and the Arial font family.
French paragraphs are styled with a red font and Courier New.
Spanish paragraphs are styled with a green font and Georgia.

💬 Usage Tips

The :lang() selector is particularly useful for multilingual websites where you need to apply specific styles based on language. It helps customize the appearance for various languages.
You can combine :lang() with other selectors to target specific elements. For instance, h1:lang(fr) will apply styles to <h1> elements with the lang="fr" attribute.
The language code in :lang() can include subtags for regional variants, such as en-US for U.S. English and en-GB for British English.

⚠️ Common Pitfalls

Make sure the lang attribute is set correctly in the HTML elements. Without the lang attribute, the :lang() selector won’t work.
Be mindful of the hierarchy in language codes. For example, :lang(en) will target both en and en-US, but :lang(en-US) will only target U.S. English specifically.
Not all browsers may interpret complex language subtags in the same way, so testing across different browsers is recommended for precise control.

🎉 Conclusion

The :lang() selector in CSS offers a flexible way to style elements based on language, making it an essential tool for multilingual websites.

By using :lang(), you can ensure that your content is visually adapted to each language, providing a more localized and accessible experience for users around the world.