LayoutTests/fast/css/css3-nth-child.html - WebKit - Git at Google

 <html>
 <head>
     <style type="text/css">
         /* Table odd / even test */
         tr:nth-child(odd)       { color: green; }
         tr:nth-child(even)      { color: purple; }

         /* Check for negative n use */
         tr:nth-child(-n+2)      { font-weight: bold; }

         /* Alternate paragraph colours in CSS */
         p:nth-child(2n+1) { color: navy; } /* odd paragraphs */
         p:nth-child(2n) { color: red; }  /* even paragraphs */

         /* Check nth-of-type and specificity */
         span						{ font-weight: bold; }
         span:nth-of-type(1)			{ font-weight: normal; }
         span:nth-of-type(2n)		{ font-style: italic; }
     </style>
 </head>

 <body>
     <div>
         <table>
             <tr>
                 <td>This is the first cell in the first row of this table, and should be green, and bold</td>
                 <td>This is the second cell in the first row of this table, and should be green and bold</td>
             </tr>
             <tr>
                 <td>This is the first cell in the second row of this table, and should be purple and bold</td>
                 <td>This is the second cell in the second row of this table, and should be purple and bold</td>
             </tr>
             <tr>
                 <td>This is the first cell in the third row of this table, and should be green</td>
                 <td>This is the second cell in the third row of this table, and should be green</td>
             </tr>
             <tr>
                 <td>This is the first cell in the fourth row of this table, and should be purple</td>
                 <td>This is the second cell in the fourth row of this table, and should be purple</td>
             </tr>
         </table>
     </div>

     <div>
         <p>
             This should be navy, as this is the first paragraph in this page.
         </p>
         <p>
             This should be red, as this is the second paragraph in this page.
         </p>
         <p>
             This should be navy, as this is the third paragraph in this page.
         </p>
         <p>
             This should be red, as this is the fourth paragraph in this page.
         </p>
     </div>

     <div>
     	<p><span><i>This whole paragraph should be italic.</i></span> <span>But only this sentence should be bold.</span></p>
     </div>
 </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	/* Table odd / even test */
	tr:nth-child(odd) { color: green; }
	tr:nth-child(even) { color: purple; }

	/* Check for negative n use */
	tr:nth-child(-n+2) { font-weight: bold; }

	/* Alternate paragraph colours in CSS */
	p:nth-child(2n+1) { color: navy; } /* odd paragraphs */
	p:nth-child(2n) { color: red; } /* even paragraphs */

	/* Check nth-of-type and specificity */
	span { font-weight: bold; }
	span:nth-of-type(1) { font-weight: normal; }
	span:nth-of-type(2n) { font-style: italic; }
	</style>
	</head>

	<body>
	<div>
	<table>
	<tr>
	<td>This is the first cell in the first row of this table, and should be green, and bold</td>
	<td>This is the second cell in the first row of this table, and should be green and bold</td>
	</tr>
	<tr>
	<td>This is the first cell in the second row of this table, and should be purple and bold</td>
	<td>This is the second cell in the second row of this table, and should be purple and bold</td>
	</tr>
	<tr>
	<td>This is the first cell in the third row of this table, and should be green</td>
	<td>This is the second cell in the third row of this table, and should be green</td>
	</tr>
	<tr>
	<td>This is the first cell in the fourth row of this table, and should be purple</td>
	<td>This is the second cell in the fourth row of this table, and should be purple</td>
	</tr>
	</table>
	</div>

	<div>
	<p>
	This should be navy, as this is the first paragraph in this page.
	</p>
	<p>
	This should be red, as this is the second paragraph in this page.
	</p>
	<p>
	This should be navy, as this is the third paragraph in this page.
	</p>
	<p>
	This should be red, as this is the fourth paragraph in this page.
	</p>
	</div>

	<div>
	<p><span><i>This whole paragraph should be italic.</i></span> <span>But only this sentence should be bold.</span></p>
	</div>
	</body>
	</html>