Categories

:last-child Selector

Categories: Child Filter

jQuery(':last-child')

Description: Selects all elements that are the last child of their parent.

  • jQuery(':last-child')

    version added: 1.0

While :last matches only a single element, :last-child can match more than one: one for each parent.

  • Finds the last span in each matched div and adds some css plus a hover state.

    HTML:
    <div>
        <span>John,</span>
        <span>Karl,</span>
        <span>Brandon,</span>
    
        <span>Sam</span>
      </div>
      <div>
        <span>Glen,</span>
        <span>Tane,</span>
    
        <span>Ralph,</span>
        <span>David</span>
      </div>
    CSS:
    
      span.solast { text-decoration:line-through; }
      
    Code:
    
        $("div span:last-child")
            .css({color:"red", fontSize:"80%"})
            .hover(function () {
                  $(this).addClass("solast");
                }, function () {
                  $(this).removeClass("solast");
                });