:only-of-type JQ Home  <<  Selectors  <<  :only-of-type

• <<    :only-child Selector
• :contains() Selector     >>

Only of type child selector.

Shorthand version $(':only-of-type')

Description

The :only-of-type selector matches elements that have no siblings with the same element name.

• Only unique child elements will be selected.
• If this selector is not preceded by another selector the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.

Syntax

Parameters

None.

Return

N/A.

:only-of-type Examples Selectors  <<  Top

Selects all elements that have no siblings with the same element name.

The following example will check for single 'a' child elements within the main content area and turn the background colour orange.

$(function(){
  $('#btn1').on('click', function() {
    $(".content a:only-of-type").css('backgroundColor', 'orange'); 
  });
}); 

The following example will check for single 'input' child elements within 'p' elements and turn the background colour teal.

$(function(){
  $('#btn2').on('click', function() {
    $("p input:only-of-type").css('backgroundColor', 'teal'); 
  });
}); 

The following example will check for single 'span' child elements within 'b' elements and turn the background colour yellow.

$(function(){
  $('#btn3').on('click', function() {
    $("b span:only-of-type").css('backgroundColor', 'yellow'); 
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    :only-child Selector
• :contains() Selector     >>