[selectors] Add an example of using :nth-child(even of foo) for zebra-striping.

--HG--
extra : rebase_source : e6fee4680ef0745fa86db2816ba57dc8ce68c67b

Author: tabatkins

selectors/Overview.bs

@@ -21,8 +21,8 @@ Abstract: Selectors Level 4 describes the selectors that already exist in [[!SEL
 At Risk: the column combinator
 At Risk: the '':drop()'' pseudo-class
 At Risk: the '':read-write'' pseudo-class
-Ignored Terms: DocumentFragment, math, h1, shadow tree, box tree, query(), element tree
-Link Defaults: html5 (element) a
+Ignored Terms: DocumentFragment, math, h1, shadow tree, box tree, query(), element tree, quirks mode
+Link Defaults: html5 (element) a, dom-core-ls (interface) document
 </pre>
 <style>
 .tprofile td, th { vertical-align: baseline; padding: 0 0.5em; }
@@ -2640,6 +2640,40 @@ Child-indexed Pseudo-classes</h3>
 		if they also have the ''.important'' class.
 	</div>
 
+	<div class="example">
+		Here's another example of using the selector argument,
+		to ensure that zebra-striping a table works correctly.
+
+		Normally, to zebra-stripe a table's rows,
+		an author would use CSS similar to the following:
+
+		<pre>
+		tr {
+			background: white; \
+		}
+		tr:nth-child(even) {
+			background: silver;
+		}
+		</pre>
+
+		However, if some of the rows are hidden and not displayed,
+		this can break up the pattern,
+		causing multiple adjacent rows to have the same background color.
+		Assuming that rows are hidden with the ''[hidden]'' attribute in HTML,
+		the following CSS would zebra-stripe the table rows robustly,
+		maintaining a proper alternating background
+		regardless of which rows are hidden:
+
+		<pre>
+		tr {
+			background: white;
+		}
+		tr:nth-child(even of :not([hidden])) {
+			background: silver;
+		}
+		</pre>
+	</div>
+
 <h4 id="the-nth-last-child-pseudo">
 '':nth-last-child()'' pseudo-class</h4>