:only-of-type Selector
Selects all elements that have no siblings with the same element name.
.only-of-type()
If the parent has other child elements with the same element name, nothing is matched.
Change the text and add a border for each button that is the only child button of its parent.
JS
<div>
<button>Sibling!</button>
<button>Sibling!</button>
</div>
<div>
<button>Sibling!</button>
</div>
<div>None</div>
<div>
<button>Sibling!</button>
<span>Sibling!</span>
<span>Sibling!</span>
</div>
<div>
<button>Sibling!</button>
</div>
CSS
div {
width: 100px;
height: 80px;
margin: 5px;
float: left;
background: #b9e;
}
span {
padding: 2px;
margin: 3px;
line-height: 1.4;
border: 1px solid #000;
}
HTML
$("button:only-of-type").text("Alone").css("border", "2px blue solid");
DEMO