Button Group Border Radius issue

Question

I'm trying to have a button group that works for having multiple buttons inside it, or just one.

Here's a fiddle: http://jsfiddle.net/jssq20gn/

Here's the html:

<!--THIS IS HOW IT SHOULD WORK FOR WHEN THERE IS THREE BUTTONS-->
<article>
   <div class='btn-group'>
       <a class='button'>Test</a>
       <a class='button'>Test</a>
       <a class='button'>Test</a>
   </div>
</article>
<!--THIS WORKS TOO-->
<article>
   <div class='btn-group'>
       <a class='button'>Test</a>
       <a class='button'>Test</a>
   </div>
</article>
<!--THIS DOESN'T WORK, should have rounded borders-->
<article>
   <div class='btn-group'>
       <a class='button'>Test</a>
   </div>
</article>

It works for when there is more than one button, but when there is only one button, the button doesn't have rounded corners on all sides.

Answer 1

The issue is :last-child is getting called after :only-child. And while this is an "only-child" it's also a "last-child" so the :last-child selector is overwriting the only:child in the CSS hierarchy. Move :only-child below :last-child:

.btn-group .button:last-child {
  border-radius: 0 6px 6px 0;
  margin-left: -1px;
}

.btn-group .button:only-child {
  border-radius: 6px;
  margin-left: 0;
}

FIDDLE