Compound block question

[ghost]

I am large

Left Middle Right

.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;}

Thanks

[qfox]

The best way here is: Left.button.button_first Middle.button Right.button.button_last

In button-group template you can check this and set modifiers.

[ghost]

Thanks, now i understood.

[qfox]

@mmiliukas Just in that way your button-group will know about button (because it's button-group). But no more code cohesions ;-)