Now I do this:
&
≫
.ccr-component {
&
: NTH-Child (N + 6) {
Display: None;
}
}
But noticed that the property works not as much as I need. I have a CCR-Component in my block, which has already display: none. The question arises, how can I apply this property for all elements, not counting the first five, who have Type attribute 2. I tried:
&
≫
.ccr-component {
&
[Type= "2"]: NTH-Child (N + 6) {
Display: None;
}
}
But it does not work. It continues to count only the first 5 elements.
-
Answer # 1
If you give an example on SCSS /SASS /LESS, put the appropriate labels. What you have in code is not CSS.
everything works, here:
/* Just for Visual * / .Parent { Background: Wheat; Padding: 5px; width: 300px; } .ccr-component { Border: 1px Solid Coral; margin: 5px; Padding: 5px; Display: inline-block; } .parent > .ccr-component [type= "2"]: NTH-Child (N + 6) { Background: Cyan; }< DIV Class= "Parent" > ≪ DIV Class= "CCR-Component" Type= "2" > Block 1 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 2 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 3 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 4 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 5 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 6 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 7 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 8 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 9 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 10 < /div > ≪ /div >You have, apparently, problems with SCSS code. Look in the generated style that it turns out as a result.
-
Answer # 2
If you give an example on SCSS /SASS /LESS, put the appropriate labels. What you have in code is not CSS.
everything works, here:
/* Just for Visual * / .Parent { Background: Wheat; Padding: 5px; width: 300px; } .ccr-component { Border: 1px Solid Coral; margin: 5px; Padding: 5px; Display: inline-block; } .parent > .ccr-component [type= "2"]: NTH-Child (N + 6) { Background: Cyan; }< DIV Class= "Parent" > ≪ DIV Class= "CCR-Component" Type= "2" > Block 1 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 2 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 3 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 4 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 5 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 6 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 7 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 8 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 9 < /div > ≪ DIV Class= "CCR-Component" Type= "2" > Block 10 < /div > ≪ /div >You have, apparently, problems with SCSS code. Look in the generated style that it turns out as a result.
Make a working example, add HTML to it clear what happens
Sergey Glazirin2021-07-21 12:17:39