198 lines
4.6 KiB
HTML
198 lines
4.6 KiB
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>
|