Skip to main content

How to declare a tree-structural pseudo-element in selector which already contains the same?

.component .parent-element:first-childThe same variant is already applied
in the selector .elementThe element you want to style:first-childThe selector you want to insert

What doesn't work​

This example is about the situation when mixin +only-for (for the tree-structural pseudo-classes) doesn't work because the same pseudo-class is already used higher in selector.

+component('.breadcrumb')
  +register
    +element('ul')
      +element('li')
        +variant('{first breadcrumb}', ':first-child')
        +element('a')

  display: inline-flex

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

    +________________________
    +element('li')
      display: inline-block

      +________________________
      +element('a')
        +default
          background: grey

        +variant('{first breadcrumb}')
          +default
            background: red

          +only-for(':first-child') // meaning for the element <a>
            background: green







.breadcrumb {
  display: inline-flex;
}

.breadcrumb ul {
  position: relative;
}

.breadcrumb ul li {
  display: inline-block;
}

.breadcrumb ul li a {
  background: grey;
}

.breadcrumb ul li:first-child a {
  background: red;
}

.breadcrumb ul li:first-child a { /* but still the same selector */
  background: green;
}

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

The right way​

+component('.breadcrumb')
  +register
    +element('ul')
      +element('li')
        +variant('{first breadcrumb}', ':first-child')
        +element('a')
          +variant(':first-child')

  display: inline-flex

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

    +________________________
    +element('li')
      display: inline-block

      +________________________
      +element('a')
        +default
          background: grey

        +variant('{first breadcrumb}') // or +variant(':first-child', -1) when no alias
          +default
            background: red

          +variant(':first-child')
            background: green








.breadcrumb {
  display: inline-flex;
}

.breadcrumb ul {
  position: relative;
}

.breadcrumb ul li {
  display: inline-block;
}

.breadcrumb ul li a {
  background: grey;
}

.breadcrumb ul li:first-child a {
  background: red;
}

.breadcrumb ul li:first-child a:first-child {
  background: green;
}

More info: +state, +default, +element, +register, +component, separator +___