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 +___