3番目と4番目のアイテムごとにスタイルを設定する

Question

カードとして表示するアイテムの配列があります。 （： - 狭い - 広い - - 広い狭い - 狭い - 広い - 広い ...というように狭いパターン）ごとに3番目と4番目の項目は、他のものよりも広いべきです。これまでに何を試してみましたか：

.card { 
    &:nth-child(1n) {width: 33%;} 
    &:nth-child(2n) {width: 33%;} 
    &:nth-child(3n) {width: 66%;} 
    &:nth-child(4n) {width: 66%;} 
} 

もちろん、これは最初の4項目のみで動作します。私は無限の量のアイテムのためにこれを使用できるようにしたい。 &:nth-child(3n)とそれに類するものではわかりません。

これをCSSグリッドで解決することは可能ですか？

Answer 1

3番目と4番目の項目を選択するには、nth-childセレクタに4n + 3と4n + 4を使用できます。

div > div { 
 
    width: 50px; 
 
    display: inline-block; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
} 
 

 
div > div:nth-child(4n + 3), 
 
div > div:nth-child(4n + 4){ 
 
    width: 100px; 
 
}

<div> 
 
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> 
 
</div>

Answer 2

あなたはn番目の子のセレクタに3n + 3と4n + 4を使用することができ、すべての3番目と4番目の項目を選択します。