Skip to main content

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.


display: inline-flex

background-color: grey

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.