| <!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 { | |
| } | |
| <div></div></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 { | |
| } | |
| <div><!-- Just a comment --></div></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 { | |
| } | |
| <div> </div></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 { | |
| } | |
| <div> | |
| How about regular text... | |
| </div></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 { | |
| } | |
| <div><blockquote></blockquote></div></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 { | |
| } | |
| <div id='appendChild'></div> | |
| 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> |