LayoutTests/fast/css/first-of-type-pseudo-class.html - WebKit - 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-of-type</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-of-type {
 				background-color: #090;
 			}

 			.defaultgreen :first-of-type {
 				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-of-type {
 }

 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the marked div element, because it is the only element of this type
 				</p>
 			</li>

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

 				<pre>div:first-of-type {
 }

 &lt;div&gt;Does this element match?&lt;/div&gt;
 &lt;div&gt;&lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the marked div element, because it is the first element of this type
 				</p>
 			</li>

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

 				<pre>div:first-of-type {
 }

 &lt;blockquote&gt;&lt;/blockquote&gt;
 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the marked div element, because it is the first element of this type
 				</p>
 			</li>

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

 				<pre>div:first-of-type {
 }

 &lt;div&gt;&lt;/div&gt;
 &lt;blockquote&gt;
    &lt;div&gt;Does this element match?&lt;/div&gt;
 &lt;/blockquote&gt;</pre>

 				<p>
 					The CSS selector should match the marked div element, because it is the first element of this type in this scope
 				</p>
 			</li>

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

 				<pre>div:first-of-type {
 }

 &lt;div&gt;
    &lt;div&gt;Does this element match?&lt;/div&gt;
 &lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the marked div element, because it is the first element of this type in the current scope
 				</p>
 			</li>

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

 				<pre>div:first-of-type {
 }

 &lt;blockquote&gt;
    &lt;div&gt;&lt;/div&gt;
 &lt;/blockquote&gt;
 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>

 				<p>
 					The CSS selector should match the marked div element, because it is the first element of this type in the current scope
 				</p>
 			</li>

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

 				<pre>div:first-of-type {
 }

 &lt;div&gt;&lt;/div&gt;
 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>

 				<p>
 					The CSS selector should not match the marked div element, because it is the second element of this type
 				</p>
 			</li>

 			<li>
 				<div class='defaultgreen'>
 					<DIV></DIV>
 					<div class='test default'></div>
 				</div>

 				<pre>div:first-of-type {
 }

 &lt;DIV&gt;&lt;/DIV&gt;
 &lt;div&gt;Does this element match?&lt;/div&gt;</pre>

 				<p>
 					The CSS selector should not match the marked div element, because it is the second element of this type
 				</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-of-type {
 }

 &lt;div id='insertBefore'&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-of-type {
 }

 &lt;div id='insertBefore'&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-of-type 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-of-type</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-of-type {
	background-color: #090;
	}

	.defaultgreen :first-of-type {
	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-of-type {
	}

	<div>Does this element match?</div></pre>

	<p>
	The CSS selector should match the marked div element, because it is the only element of this type
	</p>
	</li>

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

	<pre>div:first-of-type {
	}

	<div>Does this element match?</div>
	<div></div></pre>

	<p>
	The CSS selector should match the marked div element, because it is the first element of this type
	</p>
	</li>

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

	<pre>div:first-of-type {
	}

	<blockquote></blockquote>
	<div>Does this element match?</div></pre>

	<p>
	The CSS selector should match the marked div element, because it is the first element of this type
	</p>
	</li>

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

	<pre>div:first-of-type {
	}

	<div></div>
	<blockquote>
	<div>Does this element match?</div>
	</blockquote></pre>

	<p>
	The CSS selector should match the marked div element, because it is the first element of this type in this scope
	</p>
	</li>

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

	<pre>div:first-of-type {
	}

	<div>
	<div>Does this element match?</div>
	</div></pre>

	<p>
	The CSS selector should match the marked div element, because it is the first element of this type in the current scope
	</p>
	</li>

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

	<pre>div:first-of-type {
	}

	<blockquote>
	<div></div>
	</blockquote>
	<div>Does this element match?</div></pre>

	<p>
	The CSS selector should match the marked div element, because it is the first element of this type in the current scope
	</p>
	</li>

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

	<pre>div:first-of-type {
	}

	<div></div>
	<div>Does this element match?</div></pre>

	<p>
	The CSS selector should not match the marked div element, because it is the second element of this type
	</p>
	</li>

	<li>
	<div class='defaultgreen'>
	<DIV></DIV>
	<div class='test default'></div>
	</div>

	<pre>div:first-of-type {
	}

	<DIV></DIV>
	<div>Does this element match?</div></pre>

	<p>
	The CSS selector should not match the marked div element, because it is the second element of this type
	</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-of-type {
	}

	<div id='insertBefore'></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-of-type {
	}

	<div id='insertBefore'></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-of-type selector.
	</p>
	</li>
	</ol>
	</body>
	</html>