CSS :lang() | Style Elements with Different Languages

The CSS :lang() pseudo-class is used to select an element that has the lang attribute with a matching value. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p:lang(es) {background-color: grey; padding: 8px; color: white;}
      p:lang(de) {background-color: teal; padding: 8px; color: white;}
      p:lang(ja) {background-color: green; padding: 8px; color: white;}
      p:lang(it) {background-color: tomato; padding: 8px; color: white;}
   </style>
</head>
<body>

   <p>I'm from everywhere.</p>
   <p lang="es">Lucas es de españa.</p>
   <p lang="de">Elias kommt aus Deutschland.</p>
   <p lang="ja">Yamamoto wa Nihon shusshindesu.</p>
   <p lang="it">Stella è italiana.</p>

</body>
</html>
Output

I'm from everywhere.

Lucas es de españa.

Elias kommt aus Deutschland.

Yamamoto wa Nihon shusshindesu.

Stella è italiana.

In the above example, the CSS code defines four different styles based on the :lang selector for four different language codes:

For each language, it defines a different background-color, padding, and color.

When the lang attribute is used on any p element in the HTML document, the corresponding language-specific style is applied to it. For example, the p element with lang="es" will have a grey background, white text color, and padding of 8 pixels.

Similarly, the p element with lang="de" will have a teal background, white text color, and padding of 8 pixels.

Note: The :lang() selector is used in an HTML document that uses different languages.

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!