Skip to content

Commit 2e909b6

Browse files
kswedbergkswedberg
committed
Add a few new (as of 1.9 selectors)
1 parent 065c777 commit 2e909b6

File tree

4 files changed

+190
-2
lines changed

4 files changed

+190
-2
lines changed

‎entries/last-child-selector.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<p>While <a href="/last-selector">:last</a> matches only a single element, <code>:last-child</code> can match more than one: one for each parent.</p>
1111
</longdesc>
1212
<example>
13-
<desc>Finds the last span in each matched div and adds some css plus a hover state.</desc>
13+
<desc>Find the last span in each matched div and add some css plus a hover state.</desc>
1414
<code><![CDATA[
1515
$("div span:last-child")
1616
.css({color:"red", fontSize:"80%"})
@@ -39,4 +39,4 @@ span.solast { text-decoration:line-through; }
3939
</example>
4040
<category slug="selectors/child-filter-selectors"/>
4141
<category slug="version/1.1.4"/>
42-
</entry>
42+
</entry>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="last-of-type" return="">
3+
<title>:last-of-type Selector</title>
4+
<sample>:last-of-type</sample>
5+
<signature>
6+
<added>1.9</added>
7+
</signature>
8+
<desc>Selects all elements that are the last among siblings of the same element name.</desc>
9+
<longdesc>
10+
<p>The <code>:last-of-type</code> selector matches elements that have no other element with the same parent and the same element name coming after it in the document tree.</p>
11+
</longdesc>
12+
<example>
13+
<desc>Find the last span in each matched div and add some css plus a hover state.</desc>
14+
<code><![CDATA[
15+
$("span:last-of-type")
16+
.css({color:"red", fontSize:"80%"})
17+
.hover(function () {
18+
$(this).addClass("solast");
19+
}, function () {
20+
$(this).removeClass("solast");
21+
});
22+
]]></code>
23+
<css><![CDATA[
24+
span.solast { text-decoration:line-through; }
25+
]]></css>
26+
<html><![CDATA[<div>
27+
<span>Corey,</span>
28+
<span>Yehuda,</span>
29+
<span>Adam,</span>
30+
<span>Todd</span>
31+
</div>
32+
<div>
33+
<span>Jörn,</span>
34+
<span>Scott,</span>
35+
<span>Timo,</span>
36+
<b>Nobody</b>
37+
</div>]]></html>
38+
</example>
39+
<category slug="selectors/child-filter-selectors"/>
40+
<category slug="version/1.9"/>
41+
</entry>

‎entries/nth-last-child-selector.xml‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="nth-last-child" return="">
3+
<title>:nth-last-child() Selector</title>
4+
<sample>:nth-last-child(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-child(even)</code>, <code>:nth-last-child(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-child(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-child-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-child(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-child(even)</button>
64+
<button>:nth-last-child(odd)</button>
65+
<button>:nth-last-child(3n)</button>
66+
<button>:nth-last-child(2)</button>
67+
</div>
68+
<div>
69+
<button>:nth-last-child(3n+1)</button>
70+
<button>:nth-last-child(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/only-of-type-selector.xml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0"?>
2+
<entry type="selector" name="only-of-type" return="">
3+
<title>:only-of-type Selector</title>
4+
<sample>:only-of-type</sample>
5+
<signature>
6+
<added>1.9</added>
7+
</signature>
8+
<desc>Selects all elements that have no siblings with the same element name.</desc>
9+
<longdesc>
10+
<p>If the parent has other child elements with the same element name, nothing is matched.</p>
11+
</longdesc>
12+
<example>
13+
<desc>Change the text and add a border for each button that is the only child button of its parent.</desc>
14+
<code><![CDATA[
15+
$("button:only-of-type").text("Alone").css("border", "2px blue solid");
16+
]]></code>
17+
<css><![CDATA[
18+
div { width:100px; height:80px; margin:5px; float:left; background:#b9e; }
19+
span { padding: 2px; margin: 3px; line-height: 1.4; border: 1px solid #000; }
20+
]]></css>
21+
<html><![CDATA[<div>
22+
<button>Sibling!</button>
23+
<button>Sibling!</button>
24+
</div>
25+
26+
<div>
27+
<button>Sibling!</button>
28+
</div>
29+
<div>
30+
None
31+
</div>
32+
33+
<div>
34+
<button>Sibling!</button>
35+
<span>Sibling!</span>
36+
<span>Sibling!</span>
37+
38+
</div>
39+
<div>
40+
<button>Sibling!</button>
41+
</div>]]></html>
42+
</example>
43+
<category slug="selectors/child-filter-selectors"/>
44+
<category slug="version/1.9"/>
45+
</entry>

0 commit comments

Comments
 (0)