Skip to main content

How to address any direct child element?

.component .element > *The element you want to styleThe selector you want to insert

This is a case where the SPOT rule seems to be violated, because we are addressing elements that can be addressed by other selectors (even from other components).

Yes, it is possible to use mixin +element, but it is better to mark such a case with mixin +spot-exception-element.

+component('.component')
  +register
    +element('.element')
      +spot-exception-element('> *')

  display: inline-flex

  +________________________
  +element('.element')
    position: relative

    +____________________________
    +spot-exception-element('> *')
      display: inline-block





.component {
  display: inline-flex;
}

.component .element {
  position: relative;
}

.component .element > * {
  display: inline-block;
}

More info: +spot-exception-element, +element, +register, +component, separator +___