Skip to main content

How to declare direct child combinator selector before sub-element?

.component .parent-element >The selector you want to insert .elementThe element you want to style

This only works for combinator selector >.

+component('.toggle')
  +register
    +element('.text')
      +element('.icon')

  display: inline-flex

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

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

      +only-for('>')
        margin-top: 0.5em





.toggle {
  display: inline-flex;
}

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

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

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

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