1. Selectors should be listed under one rule {color: red} .
  2. It is impossible to cancel values ​​- it is not known what they were before replacing with your selector.

It is necessary to be like this:

enter image description here

The code is:

 .parrent { display: flex; justify-content: space-evenly; margin-bottom: 1em; } .child { width: 100px; height: 100px; border: 2px solid; background-color: blue; } 
 <div class="parrent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="separator"></div> <div class="parrent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

ps: .parrent ~ .parrent .child:nth-child(3) - obviously, you can not write ...

  • Will these elements also be repeated every 6 times? - Vadim Ovchinnikov
  • @VadimOvchinnikov No. Here each line has a separate parent block, in which there are 3 elements each. There is no "inverse" of choice here either, it is an accident. - Andrey Fedorov
  • why .parrent ~ .parrent .child:nth-child(3) obviously you can not write? What in the end should be the state? Need to change only one item? - Grundy

1 answer 1

 .parrent { display: flex; justify-content: space-evenly; margin-bottom: 1em; } .child { width: 100px; height: 100px; border: 2px solid; background-color: blue; } .parrent:nth-child(4n+1) > .child:nth-child(1), .parrent:nth-child(4n+1) > .child:nth-child(2), .parrent:nth-child(4n+3) > .child:nth-child(3) { background-color: red; } 
 <div class="parrent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="separator"></div> <div class="parrent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="separator"></div> <div class="parrent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="separator"></div> <div class="parrent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

  • .parrent:nth-child(4n+1) > .child:nth-child(1) in the model code works. In the battle - no. Some kind of crap. ( - Andrey Fedorov
  • one
    @AndreyFedorov So more elements are added, maybe with the help of JS. - Vadim Ovchinnikov
  • the pseudo selector for the parent element does not work in the combat code. Why - while there are no ideas. - Andrey Fedorov
  • in general, what is the problem with counting the number of an element, stumbled upon such a question ru.stackoverflow.com/questions/508467/… - Andrey Fedorov
  • @AndreyFedorov It is obvious that the problem with the underlining of the element, I do not know how to help. - Vadim Ovchinnikov