LayoutTests/fast/css/nth-last-child-specificity-3.html - WebKit - Git at Google

 <!doctype html>
 <html>
 <head>
 <style>
     /* The specifity varies with the element being matched. */
     :nth-last-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) {
         background-color: red;
         color: white;
         border: 5px solid purple;
     }

     /* (0, 1, 1) */
     target.foo {
         color: red;
     }
     /* (0, 2, 1) */
     target.foo.foo {
         border: 5px solid black;
     }

     /* (1, 1, 0) */
     .foo#bar {
         background-color: green;
     }
     /* (1, 0, 1) */
     target#bar {
         border: 5px solid blue;
     }

     target {
         display: block;
         margin: 2px;
     }
 </style>
 </head>
 <body>
     <p>This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.</p>
     <div>
         <target>Black text.</target>
         <target>Black text.</target>
         <target class="foo">White text on red background with black border.</target>
         <target class="foo">Red text with black border.</target>
         <target id="bar">White text on red background with purple border.</target>
         <target id="bar">Black text with blue border.</target>
         <target class="foo" id="bar">White text on red background with purple border.</target>
         <target class="foo" id="bar">Red text on green background with blue border.</target>
     </div>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style>
	/* The specifity varies with the element being matched. */
	:nth-last-child(even of target.foo, .foo#bar, target.foo#bar, target#bar) {
	background-color: red;
	color: white;
	border: 5px solid purple;
	}

	/* (0, 1, 1) */
	target.foo {
	color: red;
	}
	/* (0, 2, 1) */
	target.foo.foo {
	border: 5px solid black;
	}

	/* (1, 1, 0) */
	.foo#bar {
	background-color: green;
	}
	/* (1, 0, 1) */
	target#bar {
	border: 5px solid blue;
	}

	target {
	display: block;
	margin: 2px;
	}
	</style>
	</head>
	<body>
	<p>This test the specificity of :nth-last-child() with dynamic specificity of compound selectors. If the test pass, the style of each line should match its text description.</p>
	<div>
	<target>Black text.</target>
	<target>Black text.</target>
	<target class="foo">White text on red background with black border.</target>
	<target class="foo">Red text with black border.</target>
	<target id="bar">White text on red background with purple border.</target>
	<target id="bar">Black text with blue border.</target>
	<target class="foo" id="bar">White text on red background with purple border.</target>
	<target class="foo" id="bar">Red text on green background with blue border.</target>
	</div>
	</body>
	</html>