CSS :lang() - Style Elements with Different Languages

The CSS :lang() pseudo-class is used to select an element that has the lang attribute with 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.

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

CSS Online Test

« Previous Tutorial Next Tutorial »