-
Notifications
You must be signed in to change notification settings - Fork 264
/
Copy pathlang-selector.xml
77 lines (77 loc) · 2.18 KB
/
lang-selector.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?xml version="1.0"?>
<entry type="selector" name="lang" return="">
<title>:lang() Selector</title>
<sample>:lang(language)</sample>
<signature>
<added>1.9</added>
<argument name="language" type="String">
<desc>A language code.</desc>
</argument>
</signature>
<desc>Selects all elements of the specified language.</desc>
<longdesc>
<p>The <code>:lang()</code> selector matches elements that have a language value equal to the supplied language code or that start with the supplied language code immediately followed by "-". For example, the selector <code>$("div:lang(en)")</code>will match <code><div lang="en"></code> and <code><div lang="en-us"></code> (and any of their descendant <code><div></code>s), but not <code><div lang="fr"></code></p>
<p>For HTML elements, the language value is determined by the <code>lang</code> attribute and possibly information from <code>meta</code> elements or HTTP headers.</p>
<p>Further discussion of this usage can be found in the <a href="https://www.w3.org/TR/css3-selectors/#lang-pseudo">W3C CSS specification</a>.</p>
</longdesc>
<example>
<desc>Color div elements according to their language.</desc>
<code><![CDATA[
$( "div:lang(en-us)" ).addClass( "usa" );
$( "div:lang(es-es)" ).addClass( "spain" );
]]></code>
<html><![CDATA[
<h3>USA</h3>
<div lang="en-us">red
<div>white
<div>and blue</div>
</div>
</div>
<h3>España</h3>
<div lang="es-es">rojo
<div>amarillo
<div>y rojo</div>
</div>
</div>
]]></html>
<css><![CDATA[
body {
background-color: #ccc;
}
h3 {
margin: .25em 0;
}
div {
line-height: 1.5em
}
.usa {
background-color: #f00;
color: #fff;
}
.usa .usa {
background-color: #fff;
color: #000;
}
.usa .usa .usa {
background-color: #00f;
color: #fff;
}
.spain {
background-color: #f00;
color: #ff0;
}
.spain .spain {
background-color: #ff0;
color: #f00;
line-height: 3em;
}
.spain .spain .spain {
background-color: #f00;
color: #ff0;
line-height: 1.5em;
}
]]></css>
</example>
<category slug="selectors/basic-filter-selectors"/>
<category slug="version/1.9"/>
</entry>