:nth-last-child() pseudo-class
Daniel Glazman
Ian Hickson
-
CSS 3 Module W3C Selectors
-
Next :nth-last-child() pseudo-class
-
Previous :nth-child() pseudo-class
-
Test # 33 of 271 of the static tests category
-
Testing :nth-last-child() pseudo-class
-
ID 29
-
Date 2004-03-03
-
Revision 1.1
First list item
This second list item should have a green background
Third list item
This fourth list item should have a green background
Fifth list item
This sixth list item should have a green background
This first list item should have a green background
Second list item
This third list item should have a green background
Fourth list item
This fifth list item should have a green background
Sixth list item
1.1
1.2
1.3
2.1
2.2
2.3
Green row : 3.1
3.2
3.3
Green row : 4.1
4.2
4.3
Green row : 5.1
5.2
5.3
Green row : 6.1
6.2
6.3
1.1
green cell
1.3
1.4
green cell
1.6
1.7
green cell
2.1
green cell
2.3
2.4
green cell
2.6
2.7
green cell
3.1
green cell
3.3
3.4
green cell
3.6
3.7
green cell
.red { background-color : red }
ul > li:nth-last-child(odd) { background-color : green }
ol > li:nth-last-child(even) { background-color : green }
table.t1 tr:nth-last-child(-n+4) { background-color : green }
table.t2 td:nth-last-child(3n+1) { background-color : green }
<ul xmlns="http://www.w3.org/1999/xhtml">
<li>First list item</li>
<li class="red">This second list item should have a green background</li>
<li>Third list item</li>
<li class="red">This fourth list item should have a green background</li>
<li>Fifth list item</li>
<li class="red">This sixth list item should have a green background</li>
</ul>
<ol xmlns="http://www.w3.org/1999/xhtml">
<li class="red">This first list item should have a green background</li>
<li>Second list item</li>
<li class="red">This third list item should have a green background</li>
<li>Fourth list item</li>
<li class="red">This fifth list item should have a green background</li>
<li>Sixth list item</li>
</ol>
<div xmlns="http://www.w3.org/1999/xhtml">
<table border="1" class="t1">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr class="red">
<td>Green row : 3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
<tr class="red">
<td>Green row : 4.1</td>
<td>4.2</td>
<td>4.3</td>
</tr>
<tr class="red">
<td>Green row : 5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
<tr class="red">
<td>Green row : 6.1</td>
<td>6.2</td>
<td>6.3</td>
</tr>
</table>
<p></p>
<table class="t2" border="1">
<tr>
<td>1.1</td>
<td class="red">green cell</td>
<td>1.3</td>
<td>1.4</td>
<td class="red">green cell</td>
<td>1.6</td>
<td>1.7</td>
<td class="red">green cell</td>
</tr>
<tr>
<td>2.1</td>
<td class="red">green cell</td>
<td>2.3</td>
<td>2.4</td>
<td class="red">green cell</td>
<td>2.6</td>
<td>2.7</td>
<td class="red">green cell</td>
</tr>
<tr>
<td>3.1</td>
<td class="red">green cell</td>
<td>3.3</td>
<td>3.4</td>
<td class="red">green cell</td>
<td>3.6</td>
<td>3.7</td>
<td class="red">green cell</td>
</tr>
</table>
</div>