Cannot use another nth-child(n)

user_17818197 0
Viewed 37

I've realized that when I put another nth-child selector the text editor no longer recognizes it and neither it is read on the browser. What could be happening?

@media all and (min-width:576px){
        .LE>section{
          grid-template-columns:calc((100% - 40em) / 3) 20em calc((100% - 40em) / 3) 20em calc((100% - 40em) / 3);
        }
        h2{
          grid-column:1/6;
          grid-row:1;
        }
        button:nth-child(2n+1){
          grid-column:2;
        }
        button:nth-child(2n)/*When I write this line, the previous one is no longer recognized neither by the text editor or browser*/{
          grid-column:4;
        }
      }
css
2 Answers

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

user_171838170

So it was just a problem with the text editor Im using.

        button:nth-child(1){ grid-column:2; grid-row:2;}
        button:nth-child(2){ grid-column:4; grid-row:2;}
        button:nth-child(3){ grid-column:2; grid-row:3;}
        button:nth-child(4){ grid-column:4; grid-row:3;}

I had to specifically put that for it to work (I'm making a 5x3 grid with 4 images inside that I want to be positioned symmetrically). If someone knows a way to make that in less code please let me know.

user_178181970
Related