third_party/WebKit/LayoutTests/css3/selectors3/html/css3-modsel-28.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
   2 <html>
   3  <head>
   4   <title>:nth-child() pseudo-class</title>
   5   <style type="text/css">.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="first" href="css3-modsel-1.html" title="Groups of selectors">
  11   <link rel="prev" href="css3-modsel-27b.html" title="Impossible rules (* html, * :root)">
  12   <link rel="next" href="css3-modsel-28b.html" title=":nth-child() pseudo-class">
  13   <link rel="last" href="css3-modsel-d4.html" title="Dynamic updating of :first-child and :last-child">
  14   <link rel="up" href="./index.html">
  15   <link rel="top" href="../../index.html">
  16  </head>
  17  <body>
  18 <ul>
  19   <li class="red">This first list item should have a green background</li>
  20   <li>Second list item</li>
  21   <li class="red">This third list item should have a green background</li>
  22   <li>Fourth list item</li>
  23   <li class="red">This fifth list item should have a green background</li>
  24   <li>Sixth list item</li>
  25 </ul>
  26 <ol>
  27   <li>First list item</li>
  28   <li class="red">This second list item should have a green background</li>
  29   <li>Third list item</li>
  30   <li class="red">This fourth list item should have a green background</li>
  31   <li>Fifth list item</li>
  32   <li class="red">This sixth list item should have a green background</li>
  33 </ol>
  34 <div>
  35 <table border="1" class="t1">
  36   <tr class="red">
  37 <td>Green row : 1.1</td>
  38 <td>1.2</td>
  39      <td>1.3</td>
  40 </tr>
  41   <tr class="red">
  42 <td>Green row : 2.1</td>
  43 <td>2.2</td>
  44      <td>2.3</td>
  45 </tr>
  46   <tr class="red">
  47 <td>Green row : 3.1</td>
  48 <td>3.2</td>
  49      <td>3.3</td>
  50 </tr>
  51   <tr class="red">
  52 <td>Green row : 4.1</td>
  53 <td>4.2</td>
  54       <td>4.3</td>
  55 </tr>
  56   <tr>
  57 <td>5.1</td>
  58 <td>5.2</td>
  59 <td>5.3</td>
  60 </tr>
  61   <tr>
  62 <td>6.1</td>
  63 <td>6.2</td>
  64 <td>6.3</td>
  65 </tr>
  66 </table>
  67
  68 <table class="t2" border="1">
  69   <tr>
  70 <td class="red">green cell</td>
  71 <td>1.2</td>
  72 <td>1.3</td>
  73       <td class="red">green cell</td>
  74 <td>1.5</td>
  75 <td>1.6</td>
  76       <td class="red">green cell</td>
  77 <td>1.8</td>
  78 </tr>
  79   <tr>
  80 <td class="red">green cell</td>
  81 <td>2.2</td>
  82 <td>2.3</td>
  83       <td class="red">green cell</td>
  84 <td>2.5</td>
  85 <td>2.6</td>
  86       <td class="red">green cell</td>
  87 <td>2.8</td>
  88 </tr>
  89   <tr>
  90 <td class="red">green cell</td>
  91 <td>3.2</td>
  92 <td>3.3</td>
  93       <td class="red">green cell</td>
  94 <td>3.5</td>
  95 <td>3.6</td>
  96       <td class="red">green cell</td>
  97 <td>3.8</td>
  98 </tr>
  99 </table>
 100 </div>
 101 </body>
 102 </html>