jQuery :only-of-type Selector

What You’ll Learn

The :only-of-type selector matches every element that is the only sibling of its tag name under the same parent. Standard CSS since jQuery 1.9; ideal for lone buttons beside other tags, single paragraphs in mixed blocks, and type-scoped empty states.

Introduction

Mixed markup often contains exactly one <button>, one <p>, or one <li> of a given type — even when other element types share the same parent. jQuery’s :only-of-type pseudo-class finds those elements by checking whether any same-tag sibling exists.

Official jQuery documentation states: if the parent has other child elements with the same element name, nothing is matched. Two buttons in one div disqualify both — but a single button beside two span elements still matches button:only-of-type, which is the key difference from :only-child.

Understanding the :only-of-type Selector

Think of :only-of-type as the type-scoped intersection of first and last among same-tag siblings:

• button:only-of-type → the sole button in its parent, even if spans follow.
• Two span siblings → neither matches span:only-of-type.
• One p after an h2 → matches p:only-of-type but not p:only-child if the heading is an element sibling.
• Can match multiple elements document-wide — one per qualifying parent.

📝 Syntax

Official jQuery API form (since 1.9):

jQuery( ":only-of-type" )

// typical usage — chain after a type selector:
$( "button:only-of-type" )
$( "p:only-of-type" )
$( "article li:only-of-type" )

Parameters

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

Return value

• A jQuery object containing every matching element (zero or more).
• Empty collection when every parent has zero or multiple elements of the selected tag.

Official jQuery API example

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

Examples Gallery

Example 1 follows the official jQuery button:only-of-type demo. Examples 2–5 contrast with :only-child, verify :first-of-type:last-of-type, reject duplicate same-tag siblings, and style lone paragraphs in articles.

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

3 buttons → text "Alone", blue border
Div with 2 buttons → both still "Sibling!"

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

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

only-of-type → 2 (button + span groups)
only-child → 1 (button-only div only)

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

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

$( "span:only-of-type" ).css( "fontWeight", "bold" );

console.log( "Matches →", $( "span:only-of-type" ).length );
// 1 from solo span div, 0 from two-span div

Matches → 1 (Only label bold)
Two-span div → no match

$( "article p:only-of-type" ).css({
  fontSize: "1.125rem",
  lineHeight: "1.7"
});

Solo summary paragraph → larger readable text
Multi-paragraph article → no only-of-type match

🚀 Common Use Cases

• Action bars — style button:only-of-type as a full-width CTA beside icons.
• Article summaries — detect p:only-of-type for lead-paragraph typography.
• Form rows — widen a lone input:only-of-type in a mixed label row.
• List badges — highlight li:only-of-type in compact menus.
• Validation — flag parents with exactly one element of a required tag.
• CSS parity — reuse :only-of-type in stylesheets and jQuery.

📝 Notes

• Available since jQuery 1.9 — standard CSS pseudo-class.
• Official rule: other child elements with the same element name prevent a match.
• Siblings of other tag names do not block — key difference from :only-child.
• Can match multiple elements — one per qualifying parent.
• Works in native querySelectorAll — no jQuery extension caveat.
• Shorthand mental model: :first-of-type:last-of-type for a given tag.

💡 Best Practices