1 <!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN">
4 <title>NEGATED :nth-child() pseudo-class
</title>
5 <style type=
"text/css">.green
{ background-color : lime
! important
; }
6 ul
> li:not
(:nth-child
(odd
)) { background-color : red
}
7 ol
> li:not
(:nth-child
(even
)) { background-color : red
}
8 table
.t1
tr:not
(:nth-child
(-n
+4)) { background-color : red
}
9 table
.t2
td:not
(:nth-child
(3n+1)) { background-color : red
}
10 table
.t1 td
, table
.t2 td
{ border : thin black solid
}</style>
11 <link rel=
"first" href=
"css3-modsel-1.html" title=
"Groups of selectors">
12 <link rel=
"prev" href=
"css3-modsel-73.html" title=
"NEGATED :nth-child() pseudo-class">
13 <link rel=
"next" href=
"css3-modsel-74.html" title=
"NEGATED :nth-last-child() pseudo-class">
14 <link rel=
"last" href=
"css3-modsel-d4.html" title=
"Dynamic updating of :first-child and :last-child">
15 <link rel=
"up" href=
"./index.html">
16 <link rel=
"top" href=
"../../index.html">
20 <li>First list item
</li>
21 <li class=
"green">This second list item should have a green background
</li>
23 <li class=
"green">This fourth list item should have a green background
</li>
24 <li>Fifth list item
</li>
25 <li class=
"green">This sixth list item should have a green background
</li>
28 <li class=
"green">This first list item should have a green background
</li>
29 <li>Second list item
</li>
30 <li class=
"green">This third list item should have a green background
</li>
31 <li>Fourth list item
</li>
32 <li class=
"green">This fifth list item should have a green background
</li>
33 <li>Sixth list item
</li>
36 <table border=
"1" class=
"t1">
58 <td>Green row :
5.1</td>
63 <td>Green row :
6.1</td>
69 <table class=
"t2" border=
"1">
72 <td class=
"green">green cell
</td>
73 <td class=
"green">green cell
</td>
75 <td class=
"green">green cell
</td>
76 <td class=
"green">green cell
</td>
78 <td class=
"green">green cell
</td>
82 <td class=
"green">green cell
</td>
83 <td class=
"green">green cell
</td>
85 <td class=
"green">green cell
</td>
86 <td class=
"green">green cell
</td>
88 <td class=
"green">green cell
</td>
92 <td class=
"green">green cell
</td>
93 <td class=
"green">green cell
</td>
95 <td class=
"green">green cell
</td>
96 <td class=
"green">green cell
</td>
98 <td class=
"green">green cell
</td>