:only-child Selector

Selects all elements that are the only child of their parent.

.only-child()

If the parent has other child elements, nothing is matched.

Change the text and add a border for each button that is the only child of its parent.

JS
<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>

<div>
  <button>Sibling!</button>
</div>

<div>None</div>

<div>
  <button>Sibling!</button>
  <button>Sibling!</button>
  <button>Sibling!</button>
</div>

<div>
  <button>Sibling!</button>
</div>
CSS
div {
  width: 100px;
  height: 80px;
  margin: 5px;
  float: left;
  background: #b9e;
}
HTML
$("div button:only-child").text("Alone").css("border", "2px blue solid");
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)