Skip to main content

How to add extra elements much higher before sub-element?

.component .inner-context +The selector you want to insert .parent-element .elementThe element you want to style

See example​

.toggle .checkbox +The selector you want to insert .text .iconThe element you want to style
+component('.toggle')
  +register
    +element('.text')
      +inner-context('{checkbox}', '.checkbox +') // must be registred with alias
      +element('.icon')

  display: inline-flex

  +_____________________
  +element('.text')
    display: inline-block

    +_____________________
    +element('.icon')
      +default
        margin-top: 0.25em

      +inner-context('{checkbox}'')
        margin-top: 0.5em






.toggle {
  display: inline-flex;
}

.toggle .text {
  display: inline-block;
}

.toggle .text .icon {
  margin-top: 0.25em;
}

.toggle .checkbox + .text .icon {
  margin-top: 0.5em;
}

More info: +inner-context, +element, +register, +component, separator +___