Skip to content

Commit f3f216d

Browse files
kswedbergkswedberg
committed
Add remaining new selectors for jQuery 1.9.
Closes jquery#219
1 parent 2fe5d46 commit f3f216d

7 files changed

+282
-3
lines changed

‎entries/first-of-type-selector.xml

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="first-of-type" return="">
3+
<title>:first-of-type Selector</title>
4+
<sample>:first-of-type</sample>
5+
<signature>
6+
<added>1.9</added>
7+
</signature>
8+
<desc>Selects all elements that are the first among siblings of the same element name.</desc>
9+
<longdesc>
10+
<p>The <code>:first-of-type</code> selector matches elements that have no other element with both the same parent and the same element name coming before it in the document tree.</p>
11+
</longdesc>
12+
<example>
13+
<desc>Find the first span in each matched div and add a class to it.</desc>
14+
<code><![CDATA[
15+
$("span:first-of-type").addClass("fot");
16+
]]></code>
17+
<css><![CDATA[
18+
span.fot { color: red; font-size: 120%; font-style: italic; }
19+
]]></css>
20+
<html><![CDATA[<div>
21+
<span>Corey,</span>
22+
<span>Yehuda,</span>
23+
<span>Adam,</span>
24+
<span>Todd</span>
25+
</div>
26+
<div>
27+
<b>Nobody,</b>
28+
<span>Jörn,</span>
29+
<span>Scott,</span>
30+
<span>Timo</span>
31+
</div>]]></html>
32+
</example>
33+
<category slug="selectors/child-filter-selectors"/>
34+
<category slug="version/1.9"/>
35+
</entry>

‎entries/lang-selector.xml

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="lang" return="">
3+
<title>:lang Selector</title>
4+
<sample>:lang(language)</sample>
5+
<signature>
6+
<added>1.9</added>
7+
<argument name="language" type="String">
8+
<desc>A language code.</desc>
9+
</argument>
10+
</signature>
11+
<desc>Selects all elements of the specified language.</desc>
12+
<longdesc>
13+
<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>&lt;div lang="en"&gt;</code> and <code>&lt;div lang="en-us"&gt;</code> (and any of their descendant <code>&lt;div&gt;</code>s), but not <code>&lt;div lang="fr"&gt;</code></p>
14+
<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>
15+
<p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#lang-pseudo">W3C CSS specification</a>.</p>
16+
</longdesc>
17+
<example>
18+
<desc>Color div elements according to their language.</desc>
19+
<code><![CDATA[
20+
$( "div:lang(en-us)" ).addClass( "usa" );
21+
$( "div:lang(es-es)" ).addClass( "spain" );
22+
]]></code>
23+
<html><![CDATA[
24+
<h3>USA</h3>
25+
<div lang="en-us">red
26+
<div>white
27+
<div>and blue</div>
28+
</div>
29+
</div>
30+
<h3>España</h3>
31+
<div lang="es-es">rojo
32+
<div>amarillo
33+
<div>y rojo</div>
34+
</div>
35+
</div>
36+
]]></html>
37+
<css><![CDATA[
38+
body { background-color: #ccc; }
39+
h3 { margin: .25em 0; }
40+
div { line-height: 1.5em}
41+
.usa { background-color: #f00; color: #fff; }
42+
.usa .usa { background-color: #fff; color: #000; }
43+
.usa .usa .usa { background-color: #00f; color: #fff; }
44+
45+
.spain { background-color: #f00; color: #ff0; }
46+
.spain .spain { background-color: #ff0; color: #f00; line-height: 3em; }
47+
.spain .spain .spain { background-color: #f00; color: #ff0; line-height: 1.5em; }
48+
]]></css>
49+
</example>
50+
<category slug="selectors/basic-filter-selectors"/>
51+
<category slug="version/1.9"/>
52+
</entry>

‎entries/nth-child-selector.xml

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
</signature>
1111
<desc>Selects all elements that are the nth-child of their parent.</desc>
1212
<longdesc>
13-
<p>Because jQuery's implementation of <code>:nth-child(n)</code> is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript's "0-indexed" counting. Therefore, given a single <code>&lt;ul&gt;</code> containing two <code>&lt;li&gt;</code>s, <code>$('li:nth-child(1)')</code> selects the first <code>&lt;li&gt;</code> while <code>$('li:eq(1)')</code> selects the second.</p>
13+
<p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. Given a single <code>&lt;ul&gt;</code> containing two <code>&lt;li&gt;</code>s, <code>$('li:nth-child(1)')</code> selects the first <code>&lt;li&gt;</code> while <code>$('li:eq(1)')</code> selects the second.</p>
1414
<p>The <code>:nth-child(n)</code> pseudo-class is easily confused with <code>:eq(n)</code>, even though the two can result in dramatically different matched elements. With <code>:nth-child(n)</code>, all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With <code>:eq(n)</code> only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.</p>
1515
<p>Further discussion of this unusual usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">W3C CSS specification</a>.</p>
1616
</longdesc>
1717
<example>
18-
<desc>Finds the second li in each matched ul and notes it.</desc>
18+
<desc>Find the second li in each matched ul and note it.</desc>
1919
<code><![CDATA[$("ul li:nth-child(2)").append("<span> - 2nd!</span>");]]></code>
2020
<css><![CDATA[
2121
div { float:left; }
@@ -103,4 +103,4 @@ td { width:50px; text-align:center; }
103103
</example>
104104
<category slug="selectors/child-filter-selectors"/>
105105
<category slug="version/1.1.4"/>
106-
</entry>
106+
</entry>

‎entries/nth-last-of-type-selector.xml

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="nth-last-of-type" return="">
3+
<title>:nth-last-of-type() Selector</title>
4+
<sample>:nth-last-of-type(index/even/odd/equation)</sample>
5+
<signature>
6+
<added>1.9</added>
7+
<argument name="index" type="Number/String">
8+
<desc>The index of each child to match, starting with the last one (<code>1</code>), the string <code>even</code> or <code>odd</code>, or an equation ( eg. <code>:nth-last-of-type(even)</code>, <code>:nth-last-of-type(4n)</code> )</desc>
9+
</argument>
10+
</signature>
11+
<desc>Selects all elements that are the nth-child of their parent, counting from the last element to the first.</desc>
12+
<longdesc>
13+
<p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. Given a single <code>&lt;ul&gt;</code> containing three <code>&lt;li&gt;</code>s, <code>$('li:nth-last-of-type(1)')</code> selects the third, last, <code>&lt;li&gt;</code>.</p>
14+
<p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-last-of-type-pseudo">W3C CSS specification</a>.</p>
15+
</longdesc>
16+
<example>
17+
<desc>Find the second to last li in each matched ul and note it.</desc>
18+
<code><![CDATA[$("ul li:nth-last-of-type(2)").append("<span> - 2nd to last!</span>");]]></code>
19+
<css><![CDATA[
20+
div { float:left; }
21+
span { color:blue; }
22+
]]></css>
23+
<html><![CDATA[<div>
24+
<ul>
25+
<li>John</li>
26+
<li>Karl</li>
27+
<li>Adam</li>
28+
</ul>
29+
</div>
30+
<div>
31+
<ul>
32+
<li>Dan</li>
33+
</ul>
34+
</div>
35+
<div>
36+
<ul>
37+
<li>Dave</li>
38+
<li>Rick</li>
39+
<li>Timmy</li>
40+
<li>Gibson</li>
41+
</ul>
42+
</div>]]></html>
43+
</example>
44+
<example>
45+
<desc>This is a playground to see how the selector works with different strings. </desc>
46+
<code><![CDATA[
47+
$("button").click(function () {
48+
var str = $(this).text();
49+
$("tr").css("background", "white");
50+
$("tr" + str).css("background", "#ff0000");
51+
$("#inner").text(str);
52+
});
53+
]]></code>
54+
<css><![CDATA[
55+
button { display:block; font-size:12px; width:100px; }
56+
div { float:left; margin:10px; font-size:10px;
57+
border:1px solid black; }
58+
span { color:blue; font-size:18px; }
59+
#inner { color:red; }
60+
td { width:50px; text-align:center; }
61+
]]></css>
62+
<html><![CDATA[<div>
63+
<button>:nth-last-of-type(even)</button>
64+
<button>:nth-last-of-type(odd)</button>
65+
<button>:nth-last-of-type(3n)</button>
66+
<button>:nth-last-of-type(2)</button>
67+
</div>
68+
<div>
69+
<button>:nth-last-of-type(3n+1)</button>
70+
<button>:nth-last-of-type(3n+2)</button>
71+
</div>
72+
73+
<div>
74+
<table>
75+
<tr><td>John</td></tr>
76+
<tr><td>Karl</td></tr>
77+
<tr><td>Brandon</td></tr>
78+
<tr><td>Benjamin</td></tr>
79+
</table>
80+
</div>
81+
<div>
82+
<table>
83+
<tr><td>Sam</td></tr>
84+
</table>
85+
</div>
86+
<div>
87+
<table>
88+
<tr><td>Glen</td></tr>
89+
<tr><td>Tane</td></tr>
90+
<tr><td>Ralph</td></tr>
91+
<tr><td>David</td></tr>
92+
<tr><td>Mike</td></tr>
93+
<tr><td>Dan</td></tr>
94+
</table>
95+
</div>
96+
97+
<span>tr<span id="inner"></span></span>
98+
]]></html>
99+
</example>
100+
<category slug="selectors/child-filter-selectors"/>
101+
<category slug="version/1.9"/>
102+
</entry>

‎entries/nth-of-type-selector.xml

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="nth-of-type" return="">
3+
<title>:nth-of-type() Selector</title>
4+
<sample>:nth-of-type(index/even/odd/equation)</sample>
5+
<signature>
6+
<added>1.9</added>
7+
<argument name="index" type="Number/String">
8+
<desc>The index of each child to match, starting with <code>1</code>, the string <code>even</code> or <code>odd</code>, or an equation ( eg. <code>:nth-of-type(even)</code>, <code>:nth-of-type(4n)</code> )</desc>
9+
</argument>
10+
</signature>
11+
<desc>Selects all elements that are the nth child of their parent in relation to siblings with the same element name.</desc>
12+
<longdesc>
13+
<p>Because jQuery's implementation of <code>:nth-</code> selectors is strictly derived from the CSS specification, the value of <code>n</code> is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as <code>:eq()</code> or <code>:even</code> jQuery follows JavaScript's "0-indexed" counting. </p>
14+
<p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo">W3C CSS specification</a>.</p>
15+
</longdesc>
16+
<example>
17+
<desc>Find each span that is second in relation to its sibling spans.</desc>
18+
<code><![CDATA[
19+
$( "span:nth-of-type(2)" )
20+
.append( "<span> is 2nd sibling span</span>" )
21+
.addClass( "nth" );
22+
]]></code>
23+
<css><![CDATA[
24+
.nth { color: red; }
25+
]]></css>
26+
<html><![CDATA[<div>
27+
<span>John</span>,
28+
<b>Kim</b>,
29+
<span>Adam</span>,
30+
<b>Rafael</b>,
31+
<span>Oleg</span>
32+
</div>
33+
<div>
34+
<b>Dave</b>,
35+
<span>Ann</span>
36+
</div>
37+
<div>
38+
<i><span>Maurice</span></i>,
39+
<span>Richard</span>,
40+
<span>Ralph</span>,
41+
<span>Jason</span>
42+
</div>]]></html>
43+
</example>
44+
<category slug="selectors/child-filter-selectors"/>
45+
<category slug="version/1.9"/>
46+
</entry>

‎entries/root-selector.xml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="root" return="">
3+
<title>:root Selector</title>
4+
<sample>:root</sample>
5+
<signature>
6+
<added>1.9</added>
7+
<argument name="index" type="Number/String">
8+
<desc>The index of each child to match, starting with <code>1</code>, the string <code>even</code> or <code>odd</code>, or an equation ( eg. <code>:nth-last-child(even)</code>, <code>:nth-last-child(4n)</code> )</desc>
9+
</argument>
10+
</signature>
11+
<desc>Selects the element that is the root of the document.</desc>
12+
<longdesc>
13+
<p>In HTML, the root of the document, and thus the element that <code>$(":root")</code> selects, is always the <code>&lt;html&gt;</code> element.</p>
14+
</longdesc>
15+
<example>
16+
<desc>Display the tag name of the root element.</desc>
17+
<code><![CDATA[
18+
$( "<b></b>" ).html( $( ":root" )[0].nodeName ).appendTo( "#log" );
19+
]]></code>
20+
<css><![CDATA[
21+
span.fot { color: red; font-size: 120%; font-style: italic; }
22+
]]></css>
23+
<html><![CDATA[<div id="log">The root of this document is: </div>]]></html>
24+
</example>
25+
26+
<category slug="selectors/basic-filter-selectors"/>
27+
<category slug="version/1.9"/>
28+
29+
</entry>

‎entries/target-selector.xml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="target" return="">
3+
<title>:target Selector</title>
4+
<sample>:target</sample>
5+
<signature>
6+
<added>1.9</added>
7+
</signature>
8+
<desc>Selects the target element indicated by the fragment identifier of the document's URI.</desc>
9+
<longdesc>
10+
<p>If the document's URI contains a fragment identifier, or hash, then the <code>:target</code> selector will match the element with an ID that matches the identifier. For example, given a document with a URI of http://example.com/#foo, <code>$( "p:target" )</code> will select the <code>&lt;p id="foo"&gt;</code> element.</p>
11+
<p>Further discussion of this usage can be found in the <a href="http://www.w3.org/TR/css3-selectors/#target-pseudo">W3C CSS specification</a>.</p>
12+
</longdesc>
13+
<category slug="selectors/basic-filter-selectors"/>
14+
<category slug="version/1.9"/>
15+
</entry>

0 commit comments

Comments
 (0)