How to declare a tree-structural pseudo-class on sub-element?

.component .elementThe element you want to style:nth-child(2)The selector you want to insert

There is no need to register tree-structural pseudo-classes. Just use the mixin +only-for.

SASS

+component('.btn')
  +register
    +element('.icon')

  display: inline-flex

  +___________________
  +element('.icon')
    +default
      background-color: grey
    
    +only-for(':nth-child(2)')
      background-color: red

.btn {
  display: inline-flex;
}

.btn .icon {
  background-color: grey;
}

.btn .icon:nth-child(2) {
  background-color: red;
}

More info: +only-for, +default, +element, +register, +component, separator +___

Tree-structural pseudo-classes are those pseudo-classes that are related to the location of an element within the document tree:

:first-child
:last-child
:first-of-type
:last-of-type
:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
:nth-of-type(n)
:only-of-type
:only-child
:empty

In most cases, it doesn't make sense for the pseudo-classes above to register as separate variants. It's not something that the frontend developer explicitly set to HTML. It is an implicit behavior.

Obs: But you can register it as a variant if you have a good reason.