4列のグリッド内のすべての2番目と3番目の要素を選択する

Question

グリッドの中の要素を選択します。私は特にnthセレクタではあまりよくありませんので、私はここで紛失しています。要素を選択するには、2 + 3、6 + 7、10 + 11、14 + 15のいずれの方法が最適でしょうか。

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
    font-family: Helvetica; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    border: 4px solid #000; 
 
    width: 400px; 
 
} 
 

 
.flex-child { 
 
    flex-grow: 0; 
 
\t flex-basis: 25%; 
 
    background: tomato; 
 
    padding: 10px; 
 
    border: 5px solid red; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
}

<div class="flex-container"> 
 
    <div class="flex-child">1</div> 
 
    <div class="flex-child">2</div> 
 
    <div class="flex-child">3</div> 
 
    <div class="flex-child">4</div> 
 
    <div class="flex-child">5</div> 
 
    <div class="flex-child">6</div> 
 
    <div class="flex-child">7</div> 
 
    <div class="flex-child">8</div> 
 
    <div class="flex-child">9</div> 
 
    <div class="flex-child">10</div> 
 
    <div class="flex-child">11</div> 
 
    <div class="flex-child">12</div> 
 
    <div class="flex-child">13</div> 
 
    <div class="flex-child">14</div> 
 
    <div class="flex-child">15</div> 
 
    <div class="flex-child">16</div> 
 
    <div class="flex-child">17</div> 
 
    <div class="flex-child">18</div> 
 
    <div class="flex-child">19</div> 
 
    <div class="flex-child">20</div> 
 
</div>

Answer 1

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
    font-family: Helvetica; 
 
} 
 

 
.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    border: 4px solid #000; 
 
    width: 400px; 
 
} 
 

 
.flex-child { 
 
    flex-grow: 0; 
 
\t flex-basis: 25%; 
 
    background: tomato; 
 
    padding: 10px; 
 
    border: 5px solid red; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    text-align: center; 
 
} 
 

 
.flex-child:nth-child(4n+2),.flex-child:nth-child(4n+3) { 
 
    background: lightgreen; 
 
}

<div class="flex-container"> 
 
    <div class="flex-child">1</div> 
 
    <div class="flex-child">2</div> 
 
    <div class="flex-child">3</div> 
 
    <div class="flex-child">4</div> 
 
    <div class="flex-child">5</div> 
 
    <div class="flex-child">6</div> 
 
    <div class="flex-child">7</div> 
 
    <div class="flex-child">8</div> 
 
    <div class="flex-child">9</div> 
 
    <div class="flex-child">10</div> 
 
    <div class="flex-child">11</div> 
 
    <div class="flex-child">12</div> 
 
    <div class="flex-child">13</div> 
 
    <div class="flex-child">14</div> 
 
    <div class="flex-child">15</div> 
 
    <div class="flex-child">16</div> 
 
    <div class="flex-child">17</div> 
 
    <div class="flex-child">18</div> 
 
    <div class="flex-child">19</div> 
 
    <div class="flex-child">20</div> 
 
</div>