jQuery :only-child Selector

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

What Is :only-child?

:only-child selects every element that is the only element child of its parent — no sibling elements at all. Official docs: if the parent has other child elements, nothing is matched. Available since jQuery 1.1.4. Standard CSS.

Remember
$(":only-child")
$("div button:only-child")   → button alone in its div
$("li:only-child")           → sole li in its list

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

How to Use :only-child

Pick a type, then keep only those that sit alone under their parent.

  1. Choose the element type (button, li, and so on).
  2. Add :only-child — or combine as div button:only-child.
  3. Confirm the parent has no other element children.
  4. Ignore text nodes; they do not block a match.
PieceRequired?Role
Type / contextUsuallyLimits which tags are tested
:only-childYesRequires zero element siblings
Parent element children—Must be exactly one for a match

Pseudocode

Pseudocode
candidates = find(baseSelector)
result = empty

for each el in candidates:
    siblings = element children of el.parent
    if siblings.length == 1 and siblings[0] == el:
        keep el

return jQuery(result)
Reference

Cheat Sheet

Keep these facts handy while matching lone children.

TopicDetail
Syntax$(":only-child") / $("sel:only-child")
RuleParent has exactly one element child
Text nodesIgnored — do not count as siblings
vs :only-of-typeAll tags vs same tag only
vs first + lastSame as :first-child:last-child
CSS?Yes — native querySelectorAll
SincejQuery 1.1.4
Try it

Live Preview

Run selectors on the official-style demo: five divs with buttons and optional text.

Official pattern: lone buttons match; paired buttons do not. Text “Sibling!” is ignored.

Result
$("div button:only-child")
matched: 3
hits: box 2 → Btn; box 3 → Btn; box 5 → Btn

/* element siblings block; text does 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: div button:only-child

Find buttons that are the only element child of their div (jQuery API example).

jQuery
var $hits = $("div button:only-child");
$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. Scope to divs. div button finds buttons inside divs.
  2. Keep lone buttons. :only-child drops any button with element siblings.
  3. Three matches. Official boxes 2, 3, and 5 qualify.
  4. Label them. .text("Alone") matches the API demo intent.

Example 2 — Text Nodes Do Not Block

Show that “Sibling!” text still allows a lone button to match.

jQuery
var $box = $("#box-text");
var buttons = $box.children("button").length;
var only = $box.find("button:only-child").length;

console.log("button elements:", buttons);
console.log("only-child matches:", only);
console.log("text present:", $box.text().indexOf("Sibling!") !== -1);
Try It Yourself

How It Works

  1. Count elements. Only one button child exists.
  2. Text is noise. “Sibling!” is a text node, not an element sibling.
  3. Match succeeds. button:only-child still selects it.
  4. Official behavior. Same idea as the API demo’s middle box.

Example 3 — Two Buttons → No Match

When two element siblings share a parent, neither is :only-child.

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

How It Works

  1. Two element children. Official rule: nothing matches :only-child.
  2. First still works. One button is :first-child.
  3. Last still works. The other is :last-child.
  4. Only needs solitude. Use it when “exactly one” matters.

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

Other tag siblings block :only-child but not :only-of-type.

jQuery
var $root = $("#mix");
console.log("span:only-child →", $root.find("span:only-child").length);
console.log("span:only-of-type →", $root.find("span:only-of-type").length);
console.log("span texts:", $root.find("span:only-of-type").map(function () {
  return this.textContent.trim();
}).get().join(", "));
Try It Yourself

How It Works

  1. Markup. One span next to a p sibling.
  2. :only-child fails. Another element child exists.
  3. :only-of-type succeeds. It is the only span.
  4. Pick carefully. See :only-of-type when other tags are OK.

Example 5 — Same as :first-child:last-child

A sole child is both first and last among element siblings.

jQuery
var $a = $("li:only-child");
var $b = $("li:first-child:last-child");

console.log("only-child:", $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. Single-item list. One li is both first and last.
  2. Two-item list. Neither li is only-child.
  3. Equivalent filters. Counts match for the demo markup.
  4. Readability. Prefer :only-child when that intent is clearer.

Edge Cases & Pitfalls

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

siblings

Any element sibling blocks

A nearby span, p, or second button means zero matches for that parent.

text

Text does not count

Whitespace and labels like “Sibling!” are text nodes — they do not prevent a match.

compare

Not the same as :only-of-type

Need “only this tag among mixed siblings”? Use :only-of-type.

scope

Many parents, many matches

Document-wide, every qualifying parent can contribute one match — not just a single result.

Compatibility

Browser Support

:only-child is standard CSS, available in jQuery since 1.1.4. It works with native querySelectorAll in modern browsers.

✓ jQuery 1.1.4+ · CSS standard

jQuery :only-child

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-child CSS + jQuery

Bottom line: Safe to use in jQuery and in plain CSS — prefer it when you need exactly one element child under a parent.

Analysis

Performance Notes

ApproachCostBest for
$("div button:only-child")Native QSA pathTypical jQuery use
document.querySelectorAll(...)Native CSSNo jQuery needed
Scope then filterSmaller setsLarge documents

Because :only-child is CSS, browsers can optimize it. Prefer a tight context (div button:only-child) over bare $(":only-child") on huge pages.

Remember

Key Takeaways

  • Role: match elements with no element siblings under the same parent.
  • Text OK: text nodes do not block :only-child.
  • vs of-type: use :only-of-type when other tags may sit nearby.
  • Equivalent: same idea as :first-child:last-child.

One line: :only-child means “this element is alone under its parent” — text allowed, other elements not.

Frequently Asked Questions

:only-child selects every element that is the only element child of its parent — no sibling elements before or after it. $("div button:only-child") matches buttons whose parent contains just that one button. Available since jQuery 1.1.4.
Nothing matches for that parent. Official docs: if the parent has other child elements, :only-child matches nothing. A button beside another button, span, or div does not match.
No. Structural pseudo-classes count element siblings only. Text like "Sibling!" in the official demo does not block a lone button from matching :only-child.
A sole element child is both :first-child and :last-child. So p:only-child matches the same nodes as p:first-child:last-child when no other element siblings exist.
:only-child requires no element siblings of any tag. :only-of-type allows siblings of other tag names — a lone span among divs can match span:only-of-type but not span:only-child.
Yes. :only-child is standard CSS and works with native querySelectorAll — e.g. document.querySelectorAll("li:only-child"). jQuery has supported it since 1.1.4.

Next: :nth-child() Selector

Select children by formula — odd, even, or an+b positions.

:nth-child 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 :last-child Selector jQuery :nth-child() Selector