jQuery :only-of-type Selector

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
Definition

What Is :only-of-type?

:only-of-type selects every element that has no siblings with the same element name under its parent. Official docs: if the parent has other children with the same tag, nothing is matched. Other tags are allowed. Available since jQuery 1.9. Standard CSS.

Remember
$(":only-of-type")
$("button:only-of-type")   → sole button (spans OK)
$("p:only-of-type")        → sole p among siblings

<div><button></button></div>                    → matches
<div><button></button><span></span></div>      → matches
<div><button></button><button></button></div>  → no match
NeedPrefer
Only of that tag (other tags OK)$("el:only-of-type")
No element siblings at all$("el:only-child")
First of that tag$("el:first-of-type")
Approach

How to Use :only-of-type

Pick a tag, then keep elements that are unique of that tag under their parent.

  1. Choose the element type (button, p, and so on).
  2. Add :only-of-type — e.g. button:only-of-type.
  3. Confirm no sibling shares that same tag name.
  4. Remember: siblings of other tags do not block the match.
PieceRequired?Role
Type / contextUsuallyLimits which tags are tested
:only-of-typeYesRequires zero same-tag siblings
Other-tag siblings—Allowed; do not block a match

Pseudocode

Pseudocode
candidates = find(baseSelector)
result = empty

for each el in candidates:
    sameTag = siblings of el with tagName == el.tagName
    if sameTag.length == 1 and sameTag[0] == el:
        keep el

return jQuery(result)
Reference

Cheat Sheet

Keep these facts handy while matching unique tag siblings.

TopicDetail
Syntax$(":only-of-type") / $("sel:only-of-type")
RuleNo sibling with the same tag name
Other tagsAllowed next to the match
vs :only-childSame-tag only vs any element sibling
vs first + last of typeSame as :first-of-type:last-of-type
CSS?Yes — native querySelectorAll
SincejQuery 1.9
Try it

Live Preview

Run selectors on the official-style demo: five boxes with buttons and optional spans.

Official pattern: lone buttons match even beside spans; two buttons in one box do not.

Result
$("button:only-of-type")
matched: 3
hits: box 2 → Sibling!; box 4 → Sibling!; box 5 → Sibling!

/* same-tag siblings block; other tags do not */
Code

jQuery Examples

Short, copy-ready snippets. Open a browser console with jQuery loaded, or use Try It Yourself for a live editor.

Example 1 — Official Demo: button:only-of-type

Find buttons that are the only button under their parent (jQuery API example).

jQuery
var $hits = $("button:only-of-type");
$hits.text("Alone");

console.log($hits.length);
console.log($hits.map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Match buttons. $("button:only-of-type") tests each button.
  2. Skip duplicates. Box 1 has two buttons — neither stays.
  3. Keep unique buttons. Boxes 2, 4, and 5 each have one button.
  4. Spans allowed. Box 4 still matches because spans are a different tag.

Example 2 — :only-of-type vs :only-child

Other-tag siblings allow of-type but block only-child.

jQuery
var $box = $("#box-spans");
console.log("only-of-type:", $box.find("button:only-of-type").length);
console.log("only-child:", $box.find("button:only-child").length);
console.log("spans:", $box.find("span").length);
Try It Yourself

How It Works

  1. One button. Unique among button siblings → of-type matches.
  2. Two spans. Extra element children exist.
  3. :only-child fails. Any element sibling blocks it.
  4. Pick the right tool. See :only-child when solitude of all tags matters.

Example 3 — Same-Tag Siblings Reject

Two elements of the same tag under one parent → neither is only-of-type.

jQuery
var $box = $("#box-pair");
console.log("buttons:", $box.find("button").length);
console.log("only-of-type:", $box.find("button:only-of-type").length);
console.log("first-of-type:", $box.find("button:first-of-type").length);
console.log("last-of-type:", $box.find("button:last-of-type").length);
Try It Yourself

How It Works

  1. Two buttons. Official rule: same element name → no only-of-type match.
  2. First still works. One button is :first-of-type.
  3. Last still works. The other is :last-of-type.
  4. Only needs uniqueness. Use it when “exactly one of this tag” matters.

Example 4 — Same as :first-of-type:last-of-type

A unique tag among siblings is both first and last of that type.

jQuery
var $a = $("p:only-of-type");
var $b = $("p:first-of-type:last-of-type");

console.log("only-of-type:", $a.map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("first+last:", $b.map(function () {
  return this.textContent.trim();
}).get().join(", "));
console.log("same size:", $a.length === $b.length);
Try It Yourself

How It Works

  1. One p. Heading siblings do not create another p.
  2. Both filters agree. Counts and text match.
  3. Two ps elsewhere. Neither would be only-of-type.
  4. Readability. Prefer :only-of-type when that intent is clearer.

Example 5 — Scoped: article p:only-of-type

Find articles that contain exactly one paragraph.

jQuery
var $hits = $("article p:only-of-type");
console.log("matched:", $hits.length);
console.log("texts:", $hits.map(function () {
  return this.textContent.trim();
}).get().join(" | "));
Try It Yourself

How It Works

  1. Scope to articles. article p limits the search.
  2. Keep unique paragraphs. One article has a single p.
  3. Skip multi-paragraph articles. Two ps → neither matches.
  4. Headings OK. An h2 sibling does not block p:only-of-type.

Edge Cases & Pitfalls

Check these before relying on :only-of-type in real projects.

same-tag

Duplicate tags block

Two buttons (or two ps) under one parent → zero only-of-type matches for that tag.

compare

Not the same as :only-child

Other tags are allowed here. Need absolute solitude? Use :only-child.

scope

Prefix with a type

Prefer button:only-of-type over bare :only-of-type to avoid surprising matches.

version

Since jQuery 1.9

Older than 1.9? This pseudo-class is unavailable — upgrade or use a manual same-tag sibling check.

Compatibility

Browser Support

:only-of-type is standard CSS, available in jQuery since 1.9. It works with native querySelectorAll in modern browsers.

✓ jQuery 1.9+ · CSS standard

jQuery :only-of-type

Works in all modern browsers with jQuery or native CSS. Same meaning in stylesheets and selectors.

100% modern browsers
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
:only-of-type CSS + jQuery

Bottom line: Safe to use in jQuery and plain CSS — prefer a typed form like button:only-of-type for clarity.

Analysis

Performance Notes

ApproachCostBest for
$("button:only-of-type")Native QSA pathTypical jQuery use
$("article p:only-of-type")Smaller scoped setLarge documents
document.querySelectorAll(...)Native CSSNo jQuery needed

Because :only-of-type is CSS, browsers can optimize it. Prefer a typed, scoped selector over bare $(":only-of-type") on huge pages.

Remember

Key Takeaways

  • Role: match elements with no same-tag siblings under the same parent.
  • Other tags OK: spans next to a lone button still match button:only-of-type.
  • vs only-child: use :only-child when any element sibling should block.
  • Equivalent: same idea as :first-of-type:last-of-type.

One line: :only-of-type means “unique among siblings of this tag” — other tags may sit nearby.

Frequently Asked Questions

:only-of-type selects every element that has no siblings with the same element name under the same parent. $("button:only-of-type") matches the sole button in a div even when span siblings exist. Available since jQuery 1.9.
Nothing matches for that parent. Official docs: if the parent has other child elements with the same element name, :only-of-type matches nothing. Two buttons in one div means neither matches.
:only-child requires no element siblings at all. :only-of-type only compares same-tag siblings — a lone button beside spans matches button:only-of-type but not button:only-child.
Yes in practice. When exactly one element of a tag exists among siblings, it is both :first-of-type and :last-of-type — so p:first-of-type:last-of-type matches the same nodes as p:only-of-type.
Yes. :only-of-type is standard CSS and works with native querySelectorAll — e.g. document.querySelectorAll("p:only-of-type"). jQuery has supported it since 1.9.
Yes. Prefer $("button:only-of-type") or $("article p:only-of-type") over bare $(":only-of-type") so the intent and scope stay clear.

Next: Descendant Selector

Select nested matches with the classic ancestor descendant pattern.

Descendant tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

jQuery :nth-last-of-type() Selector jQuery Descendant Selector ("ancestor descendant")