<!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>
