Skip to main content

How to declare a variant with :not() selector?

.component buttonThe element you want to styleThe selector you want to insert:not(.btn)
+component('#footer')
+register
+variant('.mini')
+element('button')
+variant(':not(.btn)')

display: flex

+____________________________
+element('button')
+default
display: inline-flex
font-size: 1.25em

+variant(':not(.btn)')
+default
background: orange

+variant('.mini')
font-size: 0.75em






#footer {
display: flex;
}

#footer button {
display: inline-flex;
font-size: 1.25em;
}

#footer button:not(.btn) {
background: orange;
}

#footer.mini button:not(.btn) {
font-size: 0.75em;
}

More info: +variant, +default, +element, +register, +component, separator +___