[css]first-childよりnth-childを使った方が色々便利だった話

例えば以下のように、親要素の一番最初にタイトルがあって、その下にフォームが並んでいるといったレイアウトがある場合。
最初のフォームだけタイトルと30pxの余白を空けて、それ以外のフォーム同士は10px空けたいといった時がある。

上記のようにnth-child(1 of クラス名)を使うことで簡単に最初のフォームにだけ30pxの余白を指定できるようになる。

first-childを使うと以下のようになる。

first-childを使うと、padding-top:30pxが当たるのがタイトル（○○情報）になってしまう。
first-childでは兄弟要素のグループの中で最初の要素に当たるためnth-childを使わないば場合だと.container配下ではなく、.label配下でfirst-of-typeを指定する必要がある。

.label{
  display:block;
  padding-top:10px;
  &:first-of-type{
    padding-top:30px;
  }
}

参考資料

https://qiita.com/ituki_b/items/62a752389385de7ba4a2
https://qiita.com/debiru/items/c91185ddb15ce28b8cee