Skip to main content

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

.componentThe element you want to style:first-childThe selector you want to insert

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

+component('.btn')
  +default
    background-color: grey
  
  +only-for(':first-child')
    background-color: red

.btn {
  background-color: grey;
}

.btn:first-fild {
  background-color: red;
}

More info: +only-for, +component

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.

But you can implement it with variant if you need to...​

+component('.btn')
  +register
    +variant(':first-child')

  +default
    background-color: grey
  
  +variant(':first-child')
    background-color: red




.btn {
  background-color: grey;
}

.btn:first-fild {
  background-color: red;
}