Could you please tell me why CSS is not working on last button. Actually I give border to last button of button bar. I also apply important to that last button or of bar. But it is not taking CSS. Here is my last button CSS:
.button_account_bar > .button:last-child {
border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important;
}
The issue is because last-child means it has to be the last child of the parent. Applying it to .button does not mean "last child button", it still has to be the very last child, regardless of if it's a button or not.
What you are basically saying is: apply style if it's a .button AND if it's the last-child
It seems you can use last-of-type instead:
.button_account_bar > .button:last-of-type {
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
You can check out browser support for last-of-type here
Note that you don't actually need !important at all, but you may have some other reason for it so I will leave that for you to decide on.
The last button is not the last child of its parent. You have another element, .toggle_button_div as the last child of .button_account_bar.
One way to solve it is to wrap the buttons in a new <div> and then refer to that in your CSS rule:
.button_account_bar > div > .button:last-child {
...
In your code .button_account_bar is the parent class so it's last child is div which class is "toggle_button_div, so style for ".button_account_bar > .button:last-child" is not working use div-class="toggle_button_div" outside the div-class="button_account_bar" for proper work of your style, and absolutely your code will work. or you can use last-of-type in place of last-child
