Language Specific CSS - The :lang attribute

Do you know the German words are much longer than English? And the Arabic language is read from right-to-left? How about using different font family for Chinese version of your website? Oh! That would be awesome! Can I achieve that via CSS?

Yes! With the help of the :lang(X) pseudo class and with the [lang="x"] attribute selector.

body{ 
 font: normal 14px/1.1em "Lucida Sans Unicode", "Lucida Sans", Arial, Verdana, sans-serif;
 color: RoyalBlue;
}

/*For German version*/
:lang(de) body{ /*or - html[lang="de"] body{}*/
  color: ForestGreen;
}

A demo without the lang attribute: http://jsfiddle.net/a5Ltfge0/
A demo with German version: http://jsfiddle.net/2nkmjzv6/

We can also use it with any container element such as: div, section, article, span and so on. For example

German Content

span[lang="de"]{
  color: red;
}