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

1. div:first-of-type {
   }
   
   <div>Does this element match?</div>

   The CSS selector should match the marked div element, because it is the only element of this type

2. div:first-of-type {
   }
   
   <div>Does this element match?</div>
   <div></div>

   The CSS selector should match the marked div element, because it is the first element of this type

3. div:first-of-type {
   }
   
   <blockquote></blockquote>
   <div>Does this element match?</div>

   The CSS selector should match the marked div element, because it is the first element of this type

4. div:first-of-type {
   }
   
   <div></div>
   <blockquote>
      <div>Does this element match?</div>
   </blockquote>

   The CSS selector should match the marked div element, because it is the first element of this type in this scope

5. div:first-of-type {
   }
   
   <div>
      <div>Does this element match?</div>
   </div>

   The CSS selector should match the marked div element, because it is the first element of this type in the current scope

6. div:first-of-type {
   }
   
   <blockquote>
      <div></div>
   </blockquote>
   <div>Does this element match?</div>

   The CSS selector should match the marked div element, because it is the first element of this type in the current scope

7. div:first-of-type {
   }
   
   <div></div>
   <div>Does this element match?</div>

   The CSS selector should not match the marked div element, because it is the second element of this type

8. div:first-of-type {
   }
   
   <DIV></DIV>
   <div>Does this element match?</div>

   The CSS selector should not match the marked div element, because it is the second element of this type

9. div:first-of-type {
   }
   
   <div id='insertBefore'></div>
   
   var ib = document.getElementById('insertBefore');
   ib.parentElement.insertBefore(document.createElement("div"), ib);

   The CSS selector should match the div element that is inserted by the Javascript code.

10. div:first-of-type {
    }
    
    <div id='insertBefore'></div>
    
    var ib = document.getElementById('insertBefore');
    ib.parentElement.insertBefore(document.createElement("div"), ib);

    The original div element should not be a match for the :first-of-type selector.