Skip to main content

How to declare a new component with :not() selector?

The selector you want to insertbutton:not(.btn)The element you want to style
+component('button:not(.btn)')
  +register
    +variant('.large')

  +default
    display: inline-flex
    font-size: 1em

  +variant('.large')
    font-size: 2em




button:not(.btn) {
  display: inline-flex;
  font-size: 1em;
}

button:not(.btn).large {
  font-size: 2em;
}

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

To have the opposite component...​

The goal in SPOT CSS methodology is that each component addresses different elements.

So for selector button:not(.btn) it is the opposite .btn or button.btn.

+component('.btn')
  +register
    +variant('.large')

  +default
    display: inline-flex
    font-size: 1em

  +variant('.large')
    font-size: 2em




.btn {
  display: inline-flex;
  font-size: 1em;
}

.btn.large {
  font-size: 2em;
}