Clever Geek Handbook

Select every odd item starting from the 5th place

If I wanted to select every fourth element starting from the 5th place, I would do:

.elem:nth-child(4n+5) {
    //something
}

But how do you do this for every odd element starting from the 5th place? This syntax doesn't work:

.elem:nth-child(:oddn+5) {
    //something
}
+3


source to share


2 answers


you can use .elem:nth-child(2n+5) 



li:nth-child(2n+5) {
  color: red
}
      

        
        
        
      

    
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
Run codeHide result


2n

will select every other element and +5

will act as an offset. So when n

starting at zero you get 5, 7, 9, 11, ...

+5


source


you can use

  • :nth-child(odd)

    to select every odd item
  • :not(:nth-child(-n + 4))

    to not select the first 4 elements

div:not(:nth-child(-n + 4)):nth-child(odd) {
  background: red;
}
      

        
        
        
      

    
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Run codeHide result




Or if you want to start from the 5th item you can go to this

div:not(:nth-child(-n + 5)):nth-child(even) {
  background: red;
}
      

        
        
        
      

    
<div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div><div>Div</div>
Run codeHide result


+2


source






More articles:


All Articles