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

  1. div :last-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 :last-child {
    }
    
    <div> 
       <blockquote></blockquote>
       <div></div>
    </div>

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

  3. div :last-child {
    }
    
    <div> 
       <div></div>
       <!-- Just a comment -->
    </div>

    The CSS selector should match the inner div element, because it is the last child of the outer div element Comments are not elements, so they should not be considered when determining the last child.

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

    The CSS selector should match the inner div element, because it is the last child of the outer div element. Regular text is not an element, so it should not be considered when determining the last child.

  5. div :last-child {
    }
    
    <div> 
       <div></div>
       <blockquote></blockquote>
    </div>

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

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

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

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

    The original div element should not be a match for the :last-child selector.