Skip to main content

How to declare a sub-element with :is() condition?

.component .elementThe element you want to style:is(.condition)The selector you want to insert
+component('.btn')
  +register
    +variant('.large')
    +element('.img:is(.emoji)')

  display: inline-flex

  +__________________________________
  +element('.img:is(.emoji)')
    +default
      font-size: 1em

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





.btn {
  display: inline-flex;
}

.btn .img:is(.emoji) {
  font-size: 1em;
}

.btn.large .img:is(.emoji) {
  font-size: 2em;
}

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