【CSS】3の倍数の要素にスタイルをあてる

下のようなリストを実装するときにモダンなブラウザとFlexboxのgapを使えば簡単に実装ができるが、gapを対応していないブラウザの場合にどうするか考えた

全ての要素にmargin-rightを設けてしまうと、右端の列に不要な余白ができてしまうので、3n-2（n=1,2,3...）の要素に対して左右に余白を設けることを考える

:nth-of-typeを使う

:nth-of-type() は CSSの擬似クラスで、兄弟要素のグループの中で指定された型 (タグ名) の要素を選択する

https://drafts.csswg.org/selectors-3/#nth-of-type-pseudo

というわけで以下のようにしてスタイルを当てることができた

   li:nth-of-type(3n - 1) {
      margin: 0 16px;
   }

ただ、対応ブラウザがモダンにすることができれば、Flexboxのgapの方が直感的なのでそちらを使っていきたい