Index
01 Data Attribute (unqualified)
02 Data Attribute (qualified)
03 Data attribute (unqualified with value)
04 Data Attribute (qualified with value)
05 Multiple Data Attributes (qualified with values)
06 Solo Pseudo selector
07 Combined classes
08 Multiple classes
09 Multiple classes (using child selector)
10 Partial attribute matching
11 Nth-child selector
12 Nth-child selector followed by nth-child selector
13 Insanity selection (unlucky for some)
14 Slight insanity
15 Universal
16 Element single
17 Element double
18 Element treble
19 Element treble pseudo
20 Single class

Each of these 20 pages is identical, apart from the selector used to change the text red. The page contains 1000 blocks of code, each with the text 'select' buried inside the DOM nodes like this:

	
		<div class="tagDiv wrap1">
		  <div class="tagDiv layer1" data-div="layer1">
		    <div class="tagDiv layer2">
		      <ul class="tagUl">
		        <li class="tagLi"><b class="tagB"><a href="/" class="tagA link" data-select="link">Select</a></b></li>
		      </ul>
		    </div>
		  </div>
		</div>
	
Here are the 20 rules that apply to each page:

/*
		1. Data Attribute (unqualified)
	*/
	[data-select] {
		color: red;
	}

	/*
		2. Data Attribute (qualified)
	

	a[data-select] {
		color: red;
	}
	*/
	

	/*
		3. Data Attribute (unqualified with value)
	

	[data-select="link"] {
		color: red;
	}
	*/


	/*
		4. Data Attribute (qualified with value)
	

	a[data-select="link"] {
		color: red;
	}
	*/


	/*
		5. Multiple Data Attributes (qualified with values)
	

	div[data-div="layer1"] a[data-select="link"] {
		color: red;
	}
	*/


	/*
		6. Solo Pseudo selector
	

	a:after {
		content: "after";
		color: red;
	}
	*/


	/*
		7. Combined classes
	

	.tagA.link {
		color: red;
	}
	*/


	/*
		8. Multiple classes 
	

	.tagUl .link {
		color: red;
	}
	*/


	/*
		9. Multiple classes (using child selector)
	
	.tagB > .tagA {
		color: red;
	}
	*/

	
	/*
		10. Partial attribute matching

	[class^="wrap"] {
		color: red;
	}	
	*/


	/*
		11. Nth-child selector
	
	.div:nth-of-type(1) a {
		color: red;
	}
	*/


	/*
		12. Nth-child selector followed by nth-child selector
	
	.div:nth-of-type(1) .div:nth-of-type(1) a {
		color: red;
	}
	*/


	/*
		13. Insanity selection (unlucky for some)
	
	div.wrapper > div.tagDiv > div.tagDiv.layer2 > ul.tagUL > li.tagLi > b.tagB > a.TagA.link {
		color: red;
	}
	*/


	/*
		14. Slight insanity
	
	.tagLi .tagB a.TagA.link {
		color: red;
	}
	*/


	/*
		15. Universal
	
	* {
		color: red;
	}
	*/


	/*
		16. Element single
	
	a {
		color: red;
	}
	*/


	/*
		17. Element double
	
	div a {
		color: red;
	}
	*/


	/*
		18. Element treble
	
	div ul a {
		color: red;
	}
	*/


	/*
		19. Element treble pseudo
	
	div ul a:after; {
		content: "after";
		color: red;
	}
	*/


	/*
		20. Single class
	
	.link {
		color: red;
	}
	*/