third_party/WebKit/LayoutTests/fast/css/first-child-pseudo-class.html - chromium/src - Git at Google

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 		<title>:first-child</title>

 		<style type='text/css'>
 		<!--

 			body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
 			pre { background: #fff; padding: 0.5em; }
 			li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }
 			.test { display: block; padding: 0.75em; }
 			.base, .defaultgreen { background-color: #090; }
 			.defaultred { background-color: #900; }

 			.defaultred :first-child {
 				background-color: #090;
 			}

 			.defaultgreen :first-child {
 				background-color: #900;
 			}

 			blockquote {
 				margin: 0;
 			}

 		-->
 		</style>
 	</head>

 	<body>
 		<p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>

 		<div class='base'></div>

 		<ol>
 			<li>
 				<div class='defaultred'>
 					<div class='test required'></div>
 				</div>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    &lt;div&gt;&lt;/div&gt;
 &lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the inner div element, because it is the only child of the outer div element
 				</p>
 			</li>

 			<li>
 				<div class='defaultred'>
 					<div class='test'></div>
 					<blockquote></blockquote>
 				</div>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;blockquote&gt;&lt;/blockquote&gt;
 &lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the inner div element, because it is the first child of the outer div element
 				</p>
 			</li>

 			<li>
 				<div class='defaultred'>
 					<!-- Just a comment -->
 					<div class='test'></div>
 				</div>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    &lt;!-- Just a comment --&gt;
    &lt;div&gt;&lt;/div&gt;
 &lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the inner div element, because it is the first child of the outer div element
 					Comments are not elements, so they should not be considered when determining the first child.
 				</p>
 			</li>

 			<li>
 				<div class='defaultred'>
 					.
 					<div class='test'></div>
 				</div>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    How about regular text...
    &lt;div&gt;&lt;/div&gt;
 &lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the inner div element, because it is the first child of the outer div element.
 					Regular text is not an element, so it should not be considered when determining the first child.
 				</p>
 			</li>

 			<li>
 				<div class='defaultgreen'>
 					<blockquote></blockquote>
 					<div class='test default required'></div>
 				</div>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    &lt;blockquote&gt;&lt;/blockquote&gt;
    &lt;div&gt;&lt;/div&gt;
 &lt;/div&gt;</pre>

 				<p>
 					The CSS selector should not match the inner div element, because it is the second child of the outer div element
 				</p>
 			</li>

 			<li>
 				<div class='defaultred'>
 					<div id='insertBefore1'></div>
 				</div>

 				<script type="text/javascript">
 				<!--

 					var ib = document.getElementById('insertBefore1');
 					var el = document.createElement("div");
 					el.className = 'test';
 					ib.parentNode.insertBefore(el, ib);


 				//-->
 				</script>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    &lt;div id='insertBefore'&gt;&lt;/div&gt;
 &lt;/div&gt;

 var ib = document.getElementById('insertBefore');
 ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>

 				<p>
 					The CSS selector should match the div element that is inserted by the Javascript code.
 				</p>
 			</li>

 			<li>
 				<div class='defaultgreen'>
 					<div id='insertBefore2' class='test default'></div>
 				</div>

 				<script type="text/javascript">
 				<!--

 					var ib = document.getElementById('insertBefore2');
 					ib.parentNode.insertBefore(document.createElement("div"), ib);

 				//-->
 				</script>

 				<pre>div :first-child {
 }

 &lt;div&gt;
    &lt;div id='insertBefore'&gt;&lt;/div&gt;
 &lt;/div&gt;

 var ib = document.getElementById('insertBefore');
 ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>

 				<p>
 					The original div element should not be a match for the :first-child selector.
 				</p>
 			</li>
 		</ol>
 	</body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>:first-child</title>

	<style type='text/css'>
	<!--

	body { background: #fff; color: 000; font-family: Arial, Helvetica, sans-serif; }
	pre { background: #fff; padding: 0.5em; }
	li { background: #aaa; padding: 1em; width: 80%; margin: 0 0 3em; }
	.test { display: block; padding: 0.75em; }
	.base, .defaultgreen { background-color: #090; }
	.defaultred { background-color: #900; }

	.defaultred :first-child {
	background-color: #090;
	}

	.defaultgreen :first-child {
	background-color: #900;
	}

	blockquote {
	margin: 0;
	}

	-->
	</style>
	</head>

	<body>
	<p>This page is part of the <a href="http://www.css3.info">CSS3.info</a> <a href="http://www.css3.info/selectors-test/">CSS selectors test</a>. See more info on <a href="http://www.css3.info/preview/attribute-selectors.html">CSS3 selectors</a>.</p>

	<div class='base'></div>

	<ol>
	<li>
	<div class='defaultred'>
	<div class='test required'></div>
	</div>

	<pre>div :first-child {
	}

	<div>
	<div></div>
	</div></pre>

	<p>
	The CSS selector should match the inner div element, because it is the only child of the outer div element
	</p>
	</li>

	<li>
	<div class='defaultred'>
	<div class='test'></div>
	<blockquote></blockquote>
	</div>

	<pre>div :first-child {
	}

	<div>
	<div></div>
	<blockquote></blockquote>
	</div></pre>

	<p>
	The CSS selector should match the inner div element, because it is the first child of the outer div element
	</p>
	</li>

	<li>
	<div class='defaultred'>
	<!-- Just a comment -->
	<div class='test'></div>
	</div>

	<pre>div :first-child {
	}

	<div>
	<!-- Just a comment -->
	<div></div>
	</div></pre>

	<p>
	The CSS selector should match the inner div element, because it is the first child of the outer div element
	Comments are not elements, so they should not be considered when determining the first child.
	</p>
	</li>

	<li>
	<div class='defaultred'>
	.
	<div class='test'></div>
	</div>

	<pre>div :first-child {
	}

	<div>
	How about regular text...
	<div></div>
	</div></pre>

	<p>
	The CSS selector should match the inner div element, because it is the first child of the outer div element.
	Regular text is not an element, so it should not be considered when determining the first child.
	</p>
	</li>

	<li>
	<div class='defaultgreen'>
	<blockquote></blockquote>
	<div class='test default required'></div>
	</div>

	<pre>div :first-child {
	}

	<div>
	<blockquote></blockquote>
	<div></div>
	</div></pre>

	<p>
	The CSS selector should not match the inner div element, because it is the second child of the outer div element
	</p>
	</li>

	<li>
	<div class='defaultred'>
	<div id='insertBefore1'></div>
	</div>

	<script type="text/javascript">
	<!--

	var ib = document.getElementById('insertBefore1');
	var el = document.createElement("div");
	el.className = 'test';
	ib.parentNode.insertBefore(el, ib);


	//-->
	</script>

	<pre>div :first-child {
	}

	<div>
	<div id='insertBefore'></div>
	</div>

	var ib = document.getElementById('insertBefore');
	ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>

	<p>
	The CSS selector should match the div element that is inserted by the Javascript code.
	</p>
	</li>

	<li>
	<div class='defaultgreen'>
	<div id='insertBefore2' class='test default'></div>
	</div>

	<script type="text/javascript">
	<!--

	var ib = document.getElementById('insertBefore2');
	ib.parentNode.insertBefore(document.createElement("div"), ib);

	//-->
	</script>

	<pre>div :first-child {
	}

	<div>
	<div id='insertBefore'></div>
	</div>

	var ib = document.getElementById('insertBefore');
	ib.parentElement.insertBefore(document.createElement("div"), ib);</pre>

	<p>
	The original div element should not be a match for the :first-child selector.
	</p>
	</li>
	</ol>
	</body>
	</html>