CODEWITHSUNDEEP
csscss-selectors
Alex Ferreli
Alex Ferreli

Reputation: 578

CSS3 nth-child() repeat range every 5 elements

It's possible to select a range of element each 5 elements? What i expect:

<ul>
   <li>Test</li>
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li>
   <li>Test</li>
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li> //this
   <li>Test</li>
</ul>

From 2 to 4, from 7 to 9, etc.

Thanks in advance!

Upvotes: 6

Views: 4910

Answers (1)

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

Since your range has the form [5 n - 3, 5 n - 2, 5 n - 1] (where n ≥ 1), use the following code:

li:nth-child(5n - 3), li:nth-child(5n - 2), li:nth-child(5n - 1) {
  color: red;
}
<ul>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
   <li>Test</li>
</ul>

Upvotes: 14

Related Questions