Skip to content

Commit fb1ad8c

Browse files
fantasaifantasai
committed
Add :nth-match to address <http://lists.w3.org/Archives/Public/www-style/2009Mar/0146.html> and similar use cases
1 parent 161bdd2 commit fb1ad8c

2 files changed

Lines changed: 84 additions & 17 deletions

File tree

‎selectors4/Overview.html‎

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515

1616
<h1 id=title>Selectors Level 4</h1>
1717

18-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 June 2011</h2>
18+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 June 2011</h2>
1919

2020
<dl>
2121
<dt>This version:
2222

23-
<dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110620/">
24-
http://www.w3.org/TR/2011/PR-selectors4-20110620</a> -->
23+
<dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110627/">
24+
http://www.w3.org/TR/2011/PR-selectors4-20110627</a> -->
2525
<a href="http://dev.w3.org/csswg/selectors4">
2626
http://dev.w3.org/csswg/selectors4</a>
2727

@@ -262,25 +262,31 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
262262
<li><a href="#nth-last-of-type-pseudo"><span class=secno>11.5. </span>
263263
:nth-last-of-type() pseudo-class</a>
264264

265-
<li><a href="#first-child-pseudo"><span class=secno>11.6. </span>
265+
<li><a href="#nth-match"><span class=secno>11.6. </span> :nth-match()
266+
pseudo-class</a>
267+
268+
<li><a href="#nth-match"><span class=secno>11.7. </span>
269+
:nth-last-match() pseudo-class</a>
270+
271+
<li><a href="#first-child-pseudo"><span class=secno>11.8. </span>
266272
:first-child pseudo-class</a>
267273

268-
<li><a href="#last-child-pseudo"><span class=secno>11.7. </span>
274+
<li><a href="#last-child-pseudo"><span class=secno>11.9. </span>
269275
:last-child pseudo-class</a>
270276

271-
<li><a href="#first-of-type-pseudo"><span class=secno>11.8. </span>
277+
<li><a href="#first-of-type-pseudo"><span class=secno>11.10. </span>
272278
:first-of-type pseudo-class</a>
273279

274-
<li><a href="#last-of-type-pseudo"><span class=secno>11.9. </span>
280+
<li><a href="#last-of-type-pseudo"><span class=secno>11.11. </span>
275281
:last-of-type pseudo-class</a>
276282

277-
<li><a href="#only-child-pseudo"><span class=secno>11.10. </span>
283+
<li><a href="#only-child-pseudo"><span class=secno>11.12. </span>
278284
:only-child pseudo-class</a>
279285

280-
<li><a href="#only-of-type-pseudo"><span class=secno>11.11. </span>
286+
<li><a href="#only-of-type-pseudo"><span class=secno>11.13. </span>
281287
:only-of-type pseudo-class</a>
282288

283-
<li><a href="#empty-pseudo"><span class=secno>11.12. </span> :empty
289+
<li><a href="#empty-pseudo"><span class=secno>11.14. </span> :empty
284290
pseudo-class</a>
285291
</ul>
286292

@@ -2166,7 +2172,39 @@ <h3 id=nth-last-of-type-pseudo><span class=secno>11.5. </span>
21662172
<pre>body &gt; h2:not(:first-of-type):not(:last-of-type)</pre>
21672173
</div>
21682174

2169-
<h3 id=first-child-pseudo><span class=secno>11.6. </span> :first-child
2175+
<h3 id=nth-match><span class=secno>11.6. </span> :nth-match() pseudo-class</h3>
2176+
2177+
<p><code>:nth-match(<a href="#selector"><var>selector</var></a>,
2178+
<var>a</var>n+<var>b</var>)</code> pseudo-class notation represents an
2179+
element that has a parent and has
2180+
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the given <a
2181+
href="#selector"><var>selector</var></a> <strong>before</strong> it in the
2182+
document tree, for any zero or positive integer value of <code>n</code>.
2183+
2184+
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
2185+
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
2186+
which can also be replaced with the &lsquo;<code
2187+
class=css><code>even</code></code>&rsquo; and &lsquo;<code
2188+
class=css><code>odd</code></code>&rsquo; keywords.
2189+
<!-- define <selector>. Split an+b into a similar <notation> -->
2190+
2191+
<h3 id=nth-match><span class=secno>11.7. </span> :nth-last-match()
2192+
pseudo-class</h3>
2193+
2194+
<p><code>:nth-match(<a href="#selector"><var>selector</var></a>,
2195+
<var>a</var>n+<var>b</var>)</code> pseudo-class notation represents an
2196+
element that has a parent and has
2197+
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the given <a
2198+
href="#selector"><var>selector</var></a> <strong>after</strong> it in the
2199+
document tree, for any zero or positive integer value of <code>n</code>.
2200+
2201+
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
2202+
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
2203+
which can also be replaced with the &lsquo;<code
2204+
class=css><code>even</code></code>&rsquo; and &lsquo;<code
2205+
class=css><code>odd</code></code>&rsquo; keywords.
2206+
2207+
<h3 id=first-child-pseudo><span class=secno>11.8. </span> :first-child
21702208
pseudo-class</h3>
21712209

21722210
<p>Same as <code>:nth-child(1)</code>. The <code>:first-child</code>
@@ -2201,7 +2239,7 @@ <h3 id=first-child-pseudo><span class=secno>11.6. </span> :first-child
22012239
a:first-child /* Same (assuming a is not the root element) */</pre>
22022240
</div>
22032241

2204-
<h3 id=last-child-pseudo><span class=secno>11.7. </span> :last-child
2242+
<h3 id=last-child-pseudo><span class=secno>11.9. </span> :last-child
22052243
pseudo-class</h3>
22062244

22072245
<p>Same as <code>:nth-last-child(1)</code>. The <code>:last-child</code>
@@ -2217,7 +2255,7 @@ <h3 id=last-child-pseudo><span class=secno>11.7. </span> :last-child
22172255
<pre>ol &gt; li:last-child</pre>
22182256
</div>
22192257

2220-
<h3 id=first-of-type-pseudo><span class=secno>11.8. </span> :first-of-type
2258+
<h3 id=first-of-type-pseudo><span class=secno>11.10. </span> :first-of-type
22212259
pseudo-class</h3>
22222260

22232261
<p>Same as <code>:nth-of-type(1)</code>. The <code>:first-of-type</code>
@@ -2249,7 +2287,7 @@ <h3 id=first-of-type-pseudo><span class=secno>11.8. </span> :first-of-type
22492287
&lt;/dl&gt;</pre>
22502288
</div>
22512289

2252-
<h3 id=last-of-type-pseudo><span class=secno>11.9. </span> :last-of-type
2290+
<h3 id=last-of-type-pseudo><span class=secno>11.11. </span> :last-of-type
22532291
pseudo-class</h3>
22542292

22552293
<p>Same as <code>:nth-last-of-type(1)</code>. The
@@ -2265,7 +2303,7 @@ <h3 id=last-of-type-pseudo><span class=secno>11.9. </span> :last-of-type
22652303
<pre>tr &gt; td:last-of-type</pre>
22662304
</div>
22672305

2268-
<h3 id=only-child-pseudo><span class=secno>11.10. </span> :only-child
2306+
<h3 id=only-child-pseudo><span class=secno>11.12. </span> :only-child
22692307
pseudo-class</h3>
22702308

22712309
<p>Represents an element that has a parent element and whose parent element
@@ -2274,7 +2312,7 @@ <h3 id=only-child-pseudo><span class=secno>11.10. </span> :only-child
22742312
<code>:nth-child(1):nth-last-child(1)</code>, but with a lower
22752313
specificity.
22762314

2277-
<h3 id=only-of-type-pseudo><span class=secno>11.11. </span> :only-of-type
2315+
<h3 id=only-of-type-pseudo><span class=secno>11.13. </span> :only-of-type
22782316
pseudo-class</h3>
22792317

22802318
<p>Represents an element that has a parent element and whose parent element
@@ -2283,7 +2321,7 @@ <h3 id=only-of-type-pseudo><span class=secno>11.11. </span> :only-of-type
22832321
<code>:nth-of-type(1):nth-last-of-type(1)</code>, but with a lower
22842322
specificity.
22852323

2286-
<h3 id=empty-pseudo><span class=secno>11.12. </span> :empty pseudo-class</h3>
2324+
<h3 id=empty-pseudo><span class=secno>11.14. </span> :empty pseudo-class</h3>
22872325

22882326
<p>The <code>:empty</code> pseudo-class represents an element that has no
22892327
children at all. In terms of the document tree, only element nodes and

‎selectors4/Overview.src.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1716,6 +1716,35 @@ <h3 id=nth-last-of-type-pseudo>
17161716
<pre>body &gt; h2:not(:first-of-type):not(:last-of-type)</pre>
17171717
</div>
17181718

1719+
<h3 id=nth-match>
1720+
:nth-match() pseudo-class</h3>
1721+
1722+
<p><code>:nth-match(<var>selector</var>, <var>a</var>n+<var>b</var>)</code>
1723+
pseudo-class notation represents an element that has a parent and has
1724+
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the
1725+
given <var>selector</var> <strong>before</strong> it in the document tree,
1726+
for any zero or positive integer value of <code>n</code>.
1727+
1728+
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
1729+
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
1730+
which can also be replaced with the '<code>even</code>' and '<code>odd</code>'
1731+
keywords.
1732+
1733+
<!-- define <selector>. Split an+b into a similar <notation> -->
1734+
1735+
<h3 id=nth-match>
1736+
:nth-last-match() pseudo-class</h3>
1737+
1738+
<p><code>:nth-match(<var>selector</var>, <var>a</var>n+<var>b</var>)</code>
1739+
pseudo-class notation represents an element that has a parent and has
1740+
<var>a</var><code>n</code>+<var>b</var>-1 siblings that match the
1741+
given <var>selector</var> <strong>after</strong> it in the document tree,
1742+
for any zero or positive integer value of <code>n</code>.
1743+
1744+
<p>See <a href="#nth-child-pseudo"><code>:nth-child()</code></a>
1745+
pseudo-class for the syntax of its <var>a</var>n+<var>b</var> argument,
1746+
which can also be replaced with the '<code>even</code>' and '<code>odd</code>'
1747+
keywords.
17191748

17201749
<h3 id=first-child-pseudo>
17211750
:first-child pseudo-class</h3>

0 commit comments

Comments
 (0)