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>
      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;}

   <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>


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 »

Follow/Like Us on Facebook

Subscribe Us on YouTube