Skip to main content

How to address state with the same name on higher parent element?

.component .parent-element:hoverThe selector you want to insert .elementThe element you want to style:hoverThe same state is registered on
current element
+component('article')
  +register
    +element('.header')
      +state(':hover')
      +element('.collapse')
        +state(':hover')
      

  display: inline-flex

  +________________________
  +element('.header')
    position: relative

    +________________________
    +element('.collapse')
      +default
        background: grey

      +state(':hover', -1)
        background: red








article {
  display: inline-flex;
}

article .header {
  position: relative;
}

article .header .collapse {
  background: grey;
}

article .header:hover .collapse {
  background: red;
}

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

More complex use cases​

+component('article')
  +register
    +state(':hover')
    +state(':focus')
    +element('.header')
      +state(':hover')
      +state(':focus')
      +element('.collapse')
        +state(':hover')
        +state(':focus')

  display: inline-flex

  +________________________
  +element('.header')
    position: relative

    +________________________
    +element('.collapse')
      +default
        background: grey

      +state(':hover', 0) // same as +state(':hover')
        background: blue

      +state(':hover', -1)
        background: red

      +state(':hover', -2)
        background: green

      +state(':focus', 1)
        background: magenta

      +state(':focus', 2)
        background: cyan

      +state(':focus', 0) // same as +state(':focus')
        background: yellow











article {
  display: inline-flex;
}

article .header {
  position: relative;
}


article .header .collapse {
  background: grey;
}
article .header .collapse:hover {
  background: blue;
}
article .header:hover .collapse {
  background: red;
}
article:hover .header .collapse {
  background: green;
}
article:focus .header .collapse {
  background: magenta;
}
article .header:focus .collapse {
  background: cyan;
}
article .header .collapse:focus {
  background: yellow;
}

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