nth-childとは

ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを当てることができる！

擬似クラス :nth-child()の使い方まとめ

nth-child(n)　　n番目

nth-child(３n)　　３の倍数

nth-child(３n-1)　　３の倍数-1番目に適用

nth-child(n-４)　　４番目以降に適用

nth-child(even)，　 :nth-child(2n)　　偶数

nth-child(odd)， :nth-child(2n-1)　　奇数

例えば、3の倍数の場合 :nth-child(3) になります。
以下の記述で３の倍数のリストの文字色だけ赤色に変えることができます。

sample.css

li:nth-child(3n) {
  color: red;
  font-weight: bold;
}

sample.css

li:nth-child(3n-1) {
  color: red;
  font-weight: bold;
}

例えば３つ横並びにしたとき、真ん中のみスタイルを適用したい時に便利!

nth-child(n)を使えばhamlのクラス名を変えて都度scssを書く必要がないので便利ですね！！！