When we creating classes for items, such as card designs, buttons and links, may be we will need some styles only for the first child and the last child. So this article is about, How can we apply different styles for different elements with SCSS.
In this example I’m gonna discuss, how to create a button group with SCSS as below.
HTML
<div class="button_group" role="group1">
<button id="tab1" autofocus> Button1 </button>
<button id="tab2"> Button2 </button>
<button id="tab2"> Button3 </button>
<button id="tab2"> Button4 </button>
</div>
CSS
.button_group {
height: 2.5rem;
font-size: 0;
button{
width:auto;
border-top: 0.125rem solid #000000;
border-bottom: 0.125rem solid #000000;
border-right: 0 solid #000000;
border-left: 0 solid #000000;
transition-duration: 300ms;
&:focus {
color: #ffffff;
background-color: #000000;
outline: none;
}
}
}
.button_group > :first-child {
border-left: 0.125rem solid #000000;
border-radius:0.3rem 0 0 .3rem ;
}
.button_group > :last-child {
border-right: 0.125rem solid #000000;
border-radius:0 0.3rem .3rem 0;
}
