Skip to main content

How to declare a new component with complex selector?

.some-parent The selector you want to insert.componentThe element you want to style

See example​

footer > .contacts The selector you want to insert.linkThe element you want to style
+component('footer > .contacts .link')
  +register
    +context('html.loaded')
    +element('> span')
  
  display: inline-block
  background-color: grey

  +______________________
  +element('> span')
    +default
      display: inline-block
      opacity: 0

    +context('html.loaded')
      opacity: 1





footer > .contacts .link {
  display: inline-block;
  background-color: grey;
}

footer > .contacts .link > span {
  display: inline-block;
  opacity: 0;
}

html.loaded footer > .contacts .link > span {
  opacity: 1;
}

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