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.
- SASS
+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
- CSS
.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
- SASS
+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
- CSS
.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 +___