Notice:
The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

:lang(c)

Jump to: navigation, search

:lang(c)

This article is Not Ready.


Summary

The :lang(c) pseudo selector applies to documents that specifies the lang attribute to an HTML element. This allows to style based on which language (and/or dialect) a given section is written into.


If the document language specifies how the human language of an element is determined, it is possible to write selectors that represent an element based on its language. For example, in HTML [HTML401], the language is determined by a combination of the lang attribute and possibly information from the meta elements or the protocol (such as HTTP headers). XML uses an attribute called xml:lang, and there may be other document language-specific methods for determining the language.

The pseudo-class :lang(C) represents an element that is in language C. Whether an element is represented by a :lang() selector is based solely on the element's language value (normalized to BCP 47 syntax if necessary) being equal to the identifier C, or beginning with the identifier C immediately followed by "-" (U+002D). The matching of C against the element's language value is performed case-insensitively. The identifier C does not have to be a valid language name.

C must be a valid CSS identifier [CSS21] and must not be empty. (Otherwise, the selector is invalid.)

Note: It is [recommended] that documents and protocols indicate language using codes from BCP 47 [BCP47] or its successor, and by means of "xml:lang" attributes in the case of XML-based documents [XML10]. See "Two-letter or three-letter language codes."


The value of C should be a language code that is indicated by RFC3066: Tags for the Identification of Languages.

If C is empty or invalid, the selector will have no effect.

Syntax

 
 selector:lang(C) { /* ... */ }
 

Parameters

selector
A CSS simple selector
C
Language code as specified in RFC3066: Tags for the Identification of Languages


Examples

The following code example uses the :lang(C) pseudo-class to apply a color to any p elements that are explicitly given a language value of "en" (or a hyphen-separated subset thereof). The first paragraph gets "en-us" (a subset of "en") and thus turns green.

HTML

<!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=8"/>
  <title>:lang pseudo-class</title>
  <style type="text/css">
  p:lang(en) {
	color: green;
  }
  </style>
  </head>
  <body>
  <div class=body>
	
	<h1>:lang(C) Sample</h1>
	
	<!-- This paragraph gets "en-us" (a subset of "en") and thus turns green. -->
	<p lang="en-us">This paragraph's language is set to "en-us", so it's green.</p>
	<!-- This paragraph has no language value and thus does not turn green. -->
	<p>This paragraph has no language attribute, so it doesn't turn green.</p>
	<!-- This paragraph is actually a div; therefore, even though its language value 
	    is "en-us", it does not turn green. -->
	<div lang="en-us">This div's language is set to "en-us", but this page's :lang 
	    pseudo-class only applies to paragraphs, so it doesn't turn green.</div>
		
  </div>
  </body>
  </html>

How to declare a full HTML document body language

HTML

<body>
    <p>This text is written in english, but <span lang=fr>cette section ci est écrite en français</span>.</p>
  </body>

The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.

CSS

html:lang(fr-be)
  html:lang(de)
  :lang(fr-be) > q
  :lang(de) > q

Match all of the listed language codes (and any corresponding hyphen-separated substrings of language codes) that are known to have text orientation from right to left (see the "rtl" value at the direction property).

CSS

html:lang(ar),
  html:lang(dv),
  html:lang(fa),
  html:lang(he),
  html:lang(ku-Arab),
  html:lang(pa-Arab),
  html:lang(prs),
  html:lang(ps),
  html:lang(sd-Arab),
  html:lang(syr),
  html:lang(ug),
  html:lang(ur),
  html:lang(qps-plocm) {
     direction: rtl;
  }



Related specifications

Specification Status Related Changes
CSS 2.1 W3C Recommendation

See also

Related articles

Pseudo-Classes










  • :lang(c)







Selectors




















  • :lang(c)








External resources

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]