jQuery :only-child Selector

What You’ll Learn

The :only-child selector matches every element that is the only element child of its parent — no sibling elements at all. Standard CSS since jQuery 1.1.4; ideal for lone buttons, single-item lists, and empty-state UI blocks.

Introduction

Some UI blocks contain exactly one actionable element — a single button in a card footer, one list item in a mini menu, or a lone icon in a toolbar cell. jQuery’s :only-child pseudo-class finds those elements by checking whether the parent has any other element children.

Official jQuery documentation is explicit: if the parent has other child elements, nothing is matched. Text nodes do not count — the official demo places the word “Sibling!” next to buttons without blocking a lone button from matching. When two buttons share a parent, neither matches :only-child.

Understanding the :only-child Selector

Think of :only-child as the intersection of first and last among element siblings:

• li:only-child → the sole li in its ul or ol.
• Two spans in one div → neither span matches span:only-child.
• One span plus a p sibling → the span fails — another element child exists.
• Can match multiple elements document-wide — one per qualifying parent.

📝 Syntax

Official jQuery API form (since 1.1.4):

jQuery( ":only-child" )

// typical usage — chain after a type selector:
$( "div button:only-child" )
$( "li:only-child" )
$( ".toolbar button:only-child" )

Parameters

• No arguments — keeps elements with no element siblings under the same parent.

Return value

• A jQuery object containing every matching element (zero or more).
• Empty collection when no parent has a lone element child of the selected type.

Official jQuery API example

// Label and border each button that is the only child of its div
$( "div button:only-child" )
  .text( "Alone" )
  .css( "border", "2px blue solid" );

Examples Gallery

Example 1 follows the official jQuery div button:only-child demo. Examples 2–5 cover sibling rejection, equivalence with :first-child:last-child, contrast with :only-of-type, and a toolbar styling pattern.

$( "div button:only-child" )
  .text( "Alone" )
  .css( "border", "2px blue solid" );

2 lone buttons → text "Alone", blue border
Buttons with element siblings → unchanged labels

$( "li:only-child" ).css( "backgroundColor", "#dbeafe" );

console.log( "Matches →", $( "li:only-child" ).length );
// 1 from #solo ul, 0 from #multi ul

Matches → 1 (Only item in #solo)
#multi items → no background (each has siblings)

console.log( ":only-child →", $( "p:only-child" ).length );
console.log( ":first-child:last-child →", $( "p:first-child:last-child" ).length );

:only-child → 2
:first-child:last-child → 2 (identical matched set)

$( "span:only-child" ).css( "color", "red" );
$( "span:only-of-type" ).css( "backgroundColor", "#fef3c7" );

console.log( "only-child →", $( "span:only-child" ).length );
console.log( "only-of-type →", $( "span:only-of-type" ).length );

only-child → 1 (div with span only)
only-of-type → 2 (span before p also counts)

$( ".tool-group button:only-child" ).css({
  borderRadius: "999px",
  padding: "8px 16px"
});

Solo Save button → pill shape
Cut/Copy/Paste group → default square buttons

🚀 Common Use Cases

• Single-action cards — style button:only-child as a full-width CTA.
• Mini menus — detect li:only-child for one-item dropdowns.
• Empty states — emphasize the lone paragraph in a message panel.
• Form rows — widen inputs that are the only child in a field wrapper.
• Validation — count parents where a required child appears alone.
• CSS parity — reuse :only-child in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.1.4 — standard CSS pseudo-class.
• Official rule: if the parent has other child elements, nothing matches.
• Text and comment nodes do not count as element siblings.
• Can match multiple elements — one per qualifying parent.
• Works in native querySelectorAll — no jQuery extension caveat.
• Not the same as :only-of-type — tag-scoped vs all element siblings.

💡 Best Practices