Cannot use another nth-child(n)-CodePudding

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;
        }
      }

CodePudding user response：

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) -> dual 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) -> odd 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

CodePudding user response：

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.