Cannot use another nth-child(n)

button:nth-child(2n+1){
  background: red;
}
button:nth-child(2n){
  background: blue;
}

  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>

nth-child(2n+1) -> odd number

n=0,1,2 ...

2*0+1=1 -> order 1 btn

2*1+1=3 -> order 3 btn

2*2+1=5 -> order 5 btn

nth-child(2n) -> dual number

n=0,1,2,...

2*0 = 0 -> order 0 btn (haven't)

2*1 = 2 => order 2 btn

2*2 = 4 => order 4 btn

Related