CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS lang Selector (:lang)


What is lang Selector?

CSS lang selector select all matches element whose have lang attribute value "fr" (without single/double quote).

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 1.7+
  • Internet Explorer 8+
  • Opera 8.0+
  • Safari 3.1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Syntax

General syntax of :lang selector,

/* All checked elements */
:lang(language-code) {
	property: value;
	property: value;
	...
}

element:lang(language-code) {
	property: value;
	property: value;
	...
}

Example:

CSS :lang selector select all matches <p> element whose have attribute value "fr".

<style type="text/css">
    a:lang(fr) {
        background:yellow;
    }
</style>
</head>
<body>
    <a lang="en" href="#">English International</a><br />
    <a lang="fr" href="#">French</a><br />
    <a lang="us" href="#">Google</a><br />
</body>

Run it...   »

Example Result:

Example:

CSS :lang selector replace quote to special character.

<style type="text/css">
  *{ font-size: 20px;}
  
  :lang(en) > q { quotes: '«' '»'; }
  :lang(fr) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
  :lang(us) > q { quotes: '»' '«' '\2039' '\203A'; }
</style>
</head>
<body>
    <div lang="en">
        <q>English International</q>
    </div>
    <div lang="fr">
        <q>French <q>nested</q> example</q>
    </div>
    <div lang="us">
        <q>Google <q>nested</q> example</q>
    </div>
</body>

Run it...   »

Example Result: