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