Skip to main content

How to declare a component with inner conditions?

.componentThe element you want to style:has(.sub-element)The selector you want to insert
+component('article:has(.image)')
  +register
    +variant('.new')

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

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




article:has(.image) {
  display: inline-flex;
  font-size: 1em;
}

article:has(.image).new {
  font-size: 2em;
}

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

To have the opposite component...​

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

So for selector article:has(.image) it is the opposite article:not(:has(.image)).

+component('article:not(:has(.image))')
  display: inline-flex
  font-size: 1.5em

article:not(:has(.image)) {
  display: inline-flex;
  font-size: 1.5em;
}