Skip to main content

How to address any direct child element except the first child?

.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.

And maybe even better is to use > *:not(:first-child).

+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 +___