blob: d2c8b1528512f9065439ebc9c69331f437cb6c5d [file] [log] [blame]
<!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>:empty</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 :empty {
background-color: #090;
}
.defaultgreen :empty {
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>:empty {
}
&lt;div&gt;&lt;/div&gt;</pre>
<p>
The CSS selector should match the div element, because it is empty
</p>
</li>
<li>
<div class='defaultred'>
<div class='test'><!-- Just a comment --></div>
</div>
<pre>:empty {
}
&lt;div&gt;&lt;!-- Just a comment --&gt;&lt;/div&gt;</pre>
<p>
The CSS selector should match the div element, because it is empty
</p>
</li>
<li>
<div class='defaultgreen'>
<div class='test default'> </div>
</div>
<pre>:empty {
}
&lt;div&gt; &lt;/div&gt;</pre>
<p>
The CSS selector should not match the div element, because it is not empty
</p>
</li>
<li>
<div class='defaultgreen'>
<div class='test default'>
.
</div>
</div>
<pre>:empty {
}
&lt;div&gt;
How about regular text...
&lt;/div&gt;</pre>
<p>
The CSS selector should not match the div element, because it is not empty
</p>
</li>
<li>
<div class='defaultgreen'>
<div class='test default required'><blockquote></blockquote></div>
</div>
<pre>:empty {
}
&lt;div&gt;&lt;blockquote&gt;&lt;/blockquote&gt;&lt;/div&gt;</pre>
<p>
The CSS selector should not match the div element, because it is not empty
</p>
</li>
<li>
<div class='defaultgreen'>
<div id='appendChild' class='test default'></div>
</div>
<script type="text/javascript">
<!--
var ib = document.getElementById('appendChild');
ib.appendChild(document.createElement("div"));
//-->
</script>
<pre>:empty {
}
&lt;div id='appendChild'&gt;&lt;/div&gt;
var ib = document.getElementById('appendChild');
ib.appendChild(document.createElement("div"));</pre>
<p>
The CSS selector should not match the orignal div element, because it will not be empty
anymore after the Javascript code appends a child element to it.
</p>
</li>
</ol>
</body>
</html>