css3-modsel-28.xml (2442B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>:nth-child() pseudo-class</title> 5 <style type="text/css"><![CDATA[.red { background-color : red } 6 ul > li:nth-child(odd) { background-color : lime } 7 ol > li:nth-child(even) { background-color : lime } 8 table.t1 tr:nth-child(-n+4) { background-color : lime } 9 table.t2 td:nth-child(3n+1) { background-color : lime }]]></style> 10 <link rel="author" title="Daniel Glazman" href="http://glazman.org/"/> 11 <link rel="help" href="https://www.w3.org/TR/css3-selectors/#selectors"/> <!-- bogus link to make sure it gets found --> 12 </head> 13 <body> 14 <ul> 15 <li class="red">This first list item should have a green background</li> 16 <li>Second list item</li> 17 <li class="red">This third list item should have a green background</li> 18 <li>Fourth list item</li> 19 <li class="red">This fifth list item should have a green background</li> 20 <li>Sixth list item</li> 21 </ul> 22 <ol> 23 <li>First list item</li> 24 <li class="red">This second list item should have a green background</li> 25 <li>Third list item</li> 26 <li class="red">This fourth list item should have a green background</li> 27 <li>Fifth list item</li> 28 <li class="red">This sixth list item should have a green background</li> 29 </ol> 30 <div> 31 <table border="1" class="t1"> 32 <tr class="red"> 33 <td>Green row : 1.1</td> 34 <td>1.2</td> 35 <td>1.3</td> 36 </tr> 37 <tr class="red"> 38 <td>Green row : 2.1</td> 39 <td>2.2</td> 40 <td>2.3</td> 41 </tr> 42 <tr class="red"> 43 <td>Green row : 3.1</td> 44 <td>3.2</td> 45 <td>3.3</td> 46 </tr> 47 <tr class="red"> 48 <td>Green row : 4.1</td> 49 <td>4.2</td> 50 <td>4.3</td> 51 </tr> 52 <tr> 53 <td>5.1</td> 54 <td>5.2</td> 55 <td>5.3</td> 56 </tr> 57 <tr> 58 <td>6.1</td> 59 <td>6.2</td> 60 <td>6.3</td> 61 </tr> 62 </table> 63 64 <table class="t2" border="1"> 65 <tr> 66 <td class="red">green cell</td> 67 <td>1.2</td> 68 <td>1.3</td> 69 <td class="red">green cell</td> 70 <td>1.5</td> 71 <td>1.6</td> 72 <td class="red">green cell</td> 73 <td>1.8</td> 74 </tr> 75 <tr> 76 <td class="red">green cell</td> 77 <td>2.2</td> 78 <td>2.3</td> 79 <td class="red">green cell</td> 80 <td>2.5</td> 81 <td>2.6</td> 82 <td class="red">green cell</td> 83 <td>2.8</td> 84 </tr> 85 <tr> 86 <td class="red">green cell</td> 87 <td>3.2</td> 88 <td>3.3</td> 89 <td class="red">green cell</td> 90 <td>3.5</td> 91 <td>3.6</td> 92 <td class="red">green cell</td> 93 <td>3.8</td> 94 </tr> 95 </table> 96 </div> 97 </body> 98 </html>