Selector is exceeding selector-max-specificity - css

Question

Here's the CSS that I have:
.tab {
border: 0;
flex: 1 1 0;
min-height: 48px;
opacity: 1;
text-align: center;
z-index: 0;
}
.tab:not([data-selected]) {
border-radius: 0;
}
.tab[data-selected] {
background-color: $white;
border: 1px solid #eee;
z-index: 2;
}
.tab[data-selected]:first-of-type {
margin-right: -8px;
}
.tab[data-selected]:last-of-type {
margin-left: -8px;
}
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
.tab:first-of-type {
border-bottom-left-radius: 12px;
border-top-left-radius: 12px;
}
.tab:last-of-type {
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
Having problem with this bit here:
.tab[data-selected]:not(:first-of-type):not(:last-of-type) {
margin-left: -8px;
margin-right: -8px;
}
I'm trying to select the middle child when it is selected. My stylelint is complaining like so:
Expected "`.tab[data-selected]:not(:first-of-type):not(:last-of-type)`" to have a specificity no more than "0,3,2"
How do I approach this in a better way?

Answer 1

The total specificity of your selector
.tab[data-selected]:not(:first-of-type):not(:last-of-type)
is (0,4,0), which is 1 over the limit of (0,3,2).
You can increase selector-max-specificity to accommodate this selector since the difference is so small.
Or if you'd rather not do that, you can refactor your &[data-selected] CSS rules like this. Apply both negative margins by default, then selectively remove the negative margins from &:first-of-type and &:last-of-type, thereby eliminating the need for the double negation:
&[data-selected] {
background-color: $white;
margin-left: -8px;
margin-right: -8px;
border: 1px solid #eee;
z-index: 2;
&:first-of-type {
margin-left: 0; /* Preserve negative margin-right */
}
&:last-of-type {
margin-right: 0; /* Preserve negative margin-left */
}
}
Note that the margin directions are swapped in the two nested rules since we're trying to preserve the now-existing negative margins instead of adding them where they weren't there before.