CSS :lang(language) Pseudo-class

CSS :lang(language)

The CSS :lang() pseudo-class applies styles to elements based on their language attribute (lang). This is useful for targeting specific language content in multilingual websites, allowing developers to apply unique styles or typographic rules based on the language.

The syntax for the :lang() pseudo-class is:

</>

Copy

selector:lang(language) {
    property: value;
}

Where:

Parameter	Description
`selector`	The element to which the styles will apply.
`language`	The language code (e.g., `en`, `fr`, `es`) specified in the `lang` attribute of the element.
`property`	The CSS property to style the element.

Examples

1. Styling Text in English

In this example, paragraphs with the lang="en" attribute are styled with a blue color.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:lang(en) {
            color: blue;
        }
    </style>
</head>
<body>
    <p lang="en">This text is in English.</p>
    <p lang="fr">Ce texte est en français.</p>
</body>
</html>

2. Styling Text in French

Here, paragraphs with the lang="fr" attribute are styled with a red color and italic text.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <style>
        p:lang(fr) {
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <p lang="en">This text is in English.</p>
    <p lang="fr">Ce texte est en français.</p>
</body>
</html>

3. Styling Text in Spanish

In this example, paragraphs with the lang="es" attribute are styled with a green color and bold font weight.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <style>
        p:lang(es) {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p lang="es">Este texto está en español.</p>
    <p lang="en">This text is in English.</p>
</body>
</html>

4. Styling Multiple Languages

Here, paragraphs with lang="en", lang="fr", or lang="es" are styled with a lightgray background.

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p:lang(en), p:lang(fr), p:lang(es) {
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p lang="en">This text is in English.</p>
    <p lang="fr">Ce texte est en français.</p>
    <p lang="es">Este texto está en español.</p>
</body>
</html>

5. Styling Specific Language Headings

In this example, headings with the lang="de" attribute are styled with a yellow background and black text.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <style>
        h1:lang(de) {
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <h1 lang="de">Willkommen</h1>
    <h1 lang="en">Welcome</h1>
</body>
</html>

TutorialKart

CSS :lang(language) Pseudo-class