Login with github
Forum /

I am large

.button {border-radius:5px;}

As you see in the example above i have a block named "button". I want to reuse the block "button" inside another block "button-group".

However when a button is used within a "button-group" block i would like to apply some slight modifications.

  • The left button should have radius only on the left.
  • The middle button should have no radius.
  • The right button should have radius on the right only.

How should I do this? The straight forward way for me would be:

.button-group .button {border-radius:0;} .button-group .button:first-child {border-left-radius:5px;} .button-group .button:last-child {border-right-radius:5px;}