Skip to main content

How to add extra elements with ~ before sub-element?

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

See example​

.toggle .checkbox ~The selector you want to insert .textThe element you want to style
+component('.toggle')
  +register
    +element('.text')

  display: inline-flex

  +_____________________
  +element('.text')
    +default
      display: inline-block
      margin-top: 0.25em

    +inner-context('.checkbox ~')
      margin-top: 0.5em




.toggle {
  display: inline-flex;
}

.toggle .text {
  display: inline-block;
  margin-top: 0.25em;
}

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

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