| <!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>:only-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 :only-child { | |
| background-color: #090; | |
| } | |
| .defaultgreen :only-child { | |
| background-color: #900; | |
| } | |
| --> | |
| </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 :only-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> | |
| <!-- Just a comment --> | |
| </div> | |
| <pre>div :only-child { | |
| } | |
| <div> | |
| <div></div> | |
| <!-- Just a comment --> | |
| </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> | |
| . | |
| </div> | |
| <pre>div :only-child { | |
| } | |
| <div> | |
| <div></div> | |
| How about regular text... | |
| </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='defaultgreen'> | |
| <div class='test default required'></div> | |
| <blockquote></blockquote> | |
| </div> | |
| <pre>div :only-child { | |
| } | |
| <div> | |
| <div></div> | |
| <blockquote></blockquote> | |
| </div></pre> | |
| <p> | |
| The CSS selector should not match the inner div element, because it not the only child | |
| </p> | |
| </li> | |
| <li> | |
| <div class='defaultgreen'> | |
| <div id='appendChild' class='test default'></div> | |
| </div> | |
| <script type="text/javascript"> | |
| <!-- | |
| var ib = document.getElementById('appendChild'); | |
| ib.parentNode.appendChild(document.createElement("div")); | |
| //--> | |
| </script> | |
| <pre>div :only-child { | |
| } | |
| <div> | |
| <div id='appendChild'></div> | |
| </div> | |
| var ib = document.getElementById('appendChild'); | |
| ib.parentElement.appendChild(document.createElement("div"));</pre> | |
| <p> | |
| The CSS selector should not match the original div element, because it is | |
| not the only child anymore after another child is append by the Javascript code. | |
| </p> | |
| </li> | |
| </ol> | |
| </body> | |
| </html> |