third_party/WebKit/LayoutTests/fast/css/css3-nth-child.html

   1 <html>
   2 <head>
   3     <style type="text/css">
   4         /* Table odd / even test */
   5         tr:nth-child(odd)       { color: green; }
   6         tr:nth-child(even)      { color: purple; }
   7
   8         /* Check for negative n use */
   9         tr:nth-child(-n+2)      { font-weight: bold; }
  10
  11         /* Alternate paragraph colours in CSS */
  12         p:nth-child(2n+1) { color: navy; } /* odd paragraphs */
  13         p:nth-child(2n) { color: red; }  /* even paragraphs */
  14
  15         /* Check nth-of-type and specificity */
  16         span                                            { font-weight: bold; }
  17         span:nth-of-type(1)                     { font-weight: normal; }
  18         span:nth-of-type(2n)            { font-style: italic; }
  19     </style>
  20 </head>
  21
  22 <body>
  23     <div>
  24         <table>
  25             <tr>
  26                 <td>This is the first cell in the first row of this table, and should be green, and bold</td>
  27                 <td>This is the second cell in the first row of this table, and should be green and bold</td>
  28             </tr>
  29             <tr>
  30                 <td>This is the first cell in the second row of this table, and should be purple and bold</td>
  31                 <td>This is the second cell in the second row of this table, and should be purple and bold</td>
  32             </tr>
  33             <tr>
  34                 <td>This is the first cell in the third row of this table, and should be green</td>
  35                 <td>This is the second cell in the third row of this table, and should be green</td>
  36             </tr>
  37             <tr>
  38                 <td>This is the first cell in the fourth row of this table, and should be purple</td>
  39                 <td>This is the second cell in the fourth row of this table, and should be purple</td>
  40             </tr>
  41         </table>
  42     </div>
  43
  44     <div>
  45         <p>
  46             This should be navy, as this is the first paragraph in this page.
  47         </p>
  48         <p>
  49             This should be red, as this is the second paragraph in this page.
  50         </p>
  51         <p>
  52             This should be navy, as this is the third paragraph in this page.
  53         </p>
  54         <p>
  55             This should be red, as this is the fourth paragraph in this page.
  56         </p>
  57     </div>
  58
  59     <div>
  60         <p><span><i>This whole paragraph should be italic.</i></span> <span>But only this sentence should be bold.</span></p>
  61     </div>
  62 </body>
  63 </html>