CSS Selector - How to use CSS language Selector :lang








The :lang selector matches elements based on the lang attribute.


<code>:lang</code> is a Pseudo-class and it
applies to any   element    with    associated    language-encoding information.

:lang matches elements based on their human-language encoding.

Such language information must be contained within or otherwise associated with the document.

The handling of :lang is the same as for |= attribute selectors.

For example, in an HTML document the language of an element is determined by its lang attribute.

Examples: 

html:lang(en)  {background: silver;}
*:lang(fr) {quotes: 'q ' ' q';}




Summary

CSS Version
2

CSS Syntax

:lang {
   style properties 
}

Browser compatibility

:lang Yes 8.0 Yes Yes Yes

Example

An example showing how to use :lang CSS selector. 

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        :lang(en) { <!--  w w w  .j av  a 2  s  . co  m-->
            border: thin black solid; 
            padding: 4px; 
        } 
        </style> 
    </head> 
    <body> 
        <a lang="en-us" href="http://java2s.com"> 
        Visit the java2s.com </a> 
        <span lang="en-uk">HTML</span>
        <a lang="en" href="http://w3c.org">
        Visit the W3C website</a> 
    </body> 
</html>

Click to view the demo





Example 2

:lang pseudo-class defines special rules for different languages.

In the example below, the :lang class defines the quotation marks for q elements with lang="aaa". 

<html>
    <head>
    <style> 
        q:lang(aaa) {<!--from  www  .j  a v  a  2  s.  c  o m-->
          quotes: "!!!" "!!!";
        }
    </style>
    </head>
    
    <body>
       <p>Some text <q lang="aaa">
       A quote in a paragraph</q> Some text.</p>
    </body>
</html>

Click to view the demo