<div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div>

There are 25 divs, how can one select certain divas (8, 10, 12, 15, 17, 19, 22, 24, 26) etc?

  • one
    .class: nth-of-type (№) and so how much it will take, separated by a comma - MaximLensky
  • If you are looking for some formula to cover everything at once, and not to list them separated by commas, then, most likely, this will not happen. - smellyshovel

2 answers 2

Provided that these are just blocks with each other, without other elements ... and have one common parent, they can be poked at a specific number:

 .test { display: inline-block; width: 60px; height: 60px; border: 2px solid orange; margin: 5px; } .test:nth-child(8), .test:nth-child(10), .test:nth-child(12), .test:nth-child(15), .test:nth-child(17), .test:nth-child(19), .test:nth-child(22), .test:nth-child(24), .test:nth-child(26) { background: #800; } 
 <div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div>

At the same time, nth-child is about the element of a common parent ... if among these blocks we add some other one, the numbers will already mean other elements (but you can still click on the desired one by changing the numbers).

But if such a thing ... you can really add another extra class, the very blocks that you need. And write a separate style for this class.

  • nth-of-type will probably be more correct - MaximLensky

with: nth-of-type ()

 .test:nth-of-type(2n+8){ /* Свои стили */ background: cornsilk; color: black; }