[Edit]

CSS - style HTML elements depending on content language

1 contributors

2 contributions

0 discussions

3 points

Created by:

Fletcher-Peralta

778

In this article, we would like to show you how to style HTML elements depending on content language in CSS.

Quick solution:

xxxxxxxxxx
 
div:lang(en-US) {
    background: yellow;
}

Note:

The div element can be replaced with any other selector or use * to style all elements (e.g. *:lang(en-US)).

Practical example

Edit

In this example, we create styles for div elements with three different languages using :lang() pseudo class.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    div:lang(en) {
        background: yellow;
    }
​
    div:lang(es) {
        background: gold;
    }
​
    div:lang(fr) {
        background: orange;
    }
​
    div:lang(de) {
        background: red;
    }
​
  </style>
</head>
<body>
  <div lang="en">English</div>
  <div lang="es">Española</div>
  <div lang="fr">Français</div>
  <div lang="de">Deutsch</div>
</body>
</html>