Categories

:only-child Selector

Categories: Child Filter

jQuery(':only-child')

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

  • jQuery(':only-child')

    version added: 1.0

If the parent has other child elements, nothing is matched.

  • Change the text and add a border for each button that is the only child of its parent.

    HTML:
    <div>
      <button>Sibling!</button>
      <button>Sibling!</button>
    </div>
    
    <div>
      <button>Sibling!</button>
    </div>
    <div>
      None
    </div>
    
    <div>
      <button>Sibling!</button>
      <button>Sibling!</button>
      <button>Sibling!</button>
    
    </div>
    <div>
      <button>Sibling!</button>
    </div>
    CSS:
    
      div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
    
    Code:
    
      $("div button:only-child").text("Alone").css("border", "2px blue solid");