My problem stems from trying to build responsiveness using a bootstrap button group.
It defines the following
.btn {
border-radius: 0.375rem
}
.btn-group-vertical > .btn:not(:last-child) {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is fine when I'm using the button group in desktop but I'm trying to use a media query to make it horizontal when the screen is narrow. Naively I just decided to try this
@media screen and (max-device-width: 480px) and (orientation: portrait) {
.btn-group-vertical > .btn:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
.btn-group-vertical > .btn ~ .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
Taking the first child of the button group as an example, the rules outside the media query still apply meaning the first child has the top right, bottom right, and bottom left radius all set to 0. I'm wondering if there is a way within the media query to say, "hey within this rule .btn-group-vertical > .btn:not(:last-child) ignore anything we've said about border-bottom-left-radius so that it will inherit the value from .btn (a lower specificity class) instead.
I've taken a look at the keywords initial, inherit, revert but they all refer to the parent element as opposed to a lower specificity rule.
I have an inkling this doesn't exist because I think css goes through and take the last highest specificity command to the element and so it wouldn't know how to go back down in specificity but thought I'd ask in case there was something out there.
The only use case I can see so far relates to media queries and I'm probably going to get criticism for relying on bootstrap while trying to do this. The clear alternative is to create the button group behaviour myself and have the css separated by two media queries so there is no overlap.
