Monday, August 11, 2014

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.
 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:
A demo with German version:

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