Forum Moderators: not2easy
3.5. nth-*() pseudo class selectors
The nth child pseudo class selector [w3.org] is a family of selectors that all work somewhat similar.
Syntax: E:nth-child(N)
Syntax: E:nth-last-child(N)
Syntax: E:nth-of-type(N)
Syntax: E:nth-last-of-type(N)
N can be odd or even
N can be expressed as [-]An[+¦-]B:
it matches all children that are a An+B th child their parent provided an integer n >= 0 can found for them.
If is A=0, the An part can be omitted.
Only positive values of An+B can represent a element
eg.: 4n+3 selects the 3rd (n=0), 7th (n=1), 11th (b=2), ... child of their parent
eg.: 5n-9 selects the 1st (n=2), 6th (n=3), ...
eg.: 6 selects the 6th child
eg.: -2n+10 selects the 10th (n=0), 8th (n=1), 6th (n=2), 4th (n=3) and 2nd (n=4) child, it will not select the 12th or any other one
eg.: -n+6 selects the 6th (n=0), 5th (n=1), 4th (n=2), 3rd (n=3), 2nd (n=4) and 1st (n=5) child, no others.
odd is the same as 2n+1
even is the same as 2n
:nt-child(1) is the first child of its parent
:nt-last-child(1) is the last child of its parent
Example:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>root pseudo class selector test</title>
<style type="text/css">
table {
border-collapse:collapse;
}
td {
border: 1px solid black;
width: 1.7em;
height: 1.7em;
text-align: center;
vertical-align: middle;
font-family: arial, helvetica, sans-serif;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
background-color: silver;
color: white;
}
tr:nth-last-child(2) td:nth-child(5) { /* E2 */
background-color: red;
}
tr:nth-last-child(4) td:nth-child(5) { /* E4 */
background-color: green;
}
tr:nth-last-child(-n+2) td {
background-color: orange;
}
tr:nth-child(-n+2) td {
background-color: yellow;
}
div {
border: 1px dotted red;
}
div > *:nth-of-type(odd) {
color: red;
}
p:nth-of-type(odd) {
background: yellow;
}
</style>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
</head>
<body>
<p>Chess: (note how it is the 1st p in this parent: black on yellow)</p>
<table>
<tr><td>A8</td><td>B8</td><td>C8</td><td>D8</td><td>E8</td><td>F8</td><td>G8</td><td>H8</td></tr>
<tr><td>A7</td><td>B7</td><td>C7</td><td>D7</td><td>E7</td><td>F7</td><td>G7</td><td>H7</td></tr>
<tr><td>A6</td><td>B6</td><td>C6</td><td>D6</td><td>E6</td><td>F6</td><td>G6</td><td>H6</td></tr>
<tr><td>A5</td><td>B5</td><td>C5</td><td>D5</td><td>E5</td><td>F5</td><td>G5</td><td>H5</td></tr>
<tr><td>A4</td><td>B4</td><td>C4</td><td>D4</td><td>E4</td><td>F4</td><td>G4</td><td>H4</td></tr>
<tr><td>A3</td><td>B3</td><td>C3</td><td>D3</td><td>E3</td><td>F3</td><td>G3</td><td>H3</td></tr>
<tr><td>A2</td><td>B2</td><td>C2</td><td>D2</td><td>E2</td><td>F2</td><td>G2</td><td>H2</td></tr>
<tr><td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td><td>F1</td><td>G1</td><td>H1</td></tr>
</table>
<div>
<p>1st p in div (red on yellow)</p>
<p>2nd p in div (black on white)</p>
<p>3rd p in div (red on yellow)</p>
<ul>
<li>first ul in div (red)</li>
<li>still first ul (red)</li>
</ul>
<p>4th p in div (black on white)</p>
<ul><li>second ul in div (black)</li></ul>
<p>5th p in div (red on yellow)</p>
<p>6th p in div (black on white)</p>
<ul><li>third ul in div (red)</li></ul>
<p>7th p in div (red on yellow)</p>
<p>8th p in div (black on white)</p>
<p>9th p in div (red on yellow)</p>
</div>
</body>
</html>
Support:
Graceful fallback:
As always hard to do with selectors, but if you use it to make e.g. data tables more pretty, the niceties can be left off for browsers that are running behind.
IE7.js and IE8.js add support in IE7 and lower.
No known solution for IE8, or older versions of Firefox.
Practical use:
Limited except for beautification of data tables for now due to the very limited support in browsers still.
