Home>

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.

Make a working example, add HTML to it clear what happens

Sergey Glazirin2021-07-21 12:17:39
  • Answer # 1
    1. If you give an example on SCSS /SASS /LESS, put the appropriate labels. What you have in code is not CSS.

    2. 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
    1. If you give an example on SCSS /SASS /LESS, put the appropriate labels. What you have in code is not CSS.

    2. 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.