.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
The best way here is:
Left.button.button_first Middle.button Right.button.button_lastIn button-group template you can check this and set modifiers.
Thanks, now i understood.
@mmiliukas Just in that way your
button-groupwill know aboutbutton(because it's button-group). But no more code cohesions ;-)