This page is part of the CSS3.info CSS selectors test. See more info on CSS3 selectors.

1. div :only-child {
   }
   
   <div>
      <div></div>
   </div>

   The CSS selector should match the inner div element, because it is the only child of the outer div element

2. div :only-child {
   }
   
   <div>
      <div></div>
      <!-- Just a comment -->
   </div>

   The CSS selector should match the inner div element, because it is the only child of the outer div element

3. .

   div :only-child {
   }
   
   <div>
      <div></div>
      How about regular text...
   </div>

   The CSS selector should match the inner div element, because it is the only child of the outer div element

4. div :only-child {
   }
   
   <div> 
      <div></div>
      <blockquote></blockquote>
   </div>

   The CSS selector should not match the inner div element, because it not the only child

5. div :only-child {
   }
   
   <div>
      <div id='appendChild'></div>
   </div>
   
   var ib = document.getElementById('appendChild');
   ib.parentElement.appendChild(document.createElement("div"));

   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.