CSSのnth-child・nth-of-type等の擬似要素を使えば兄弟要素の何番目の要素に対してのみスタイルを適用する等、理解して使えば柔軟なスタイル設定が可能です。
自身の備忘録のためにも書き留めておきたいと思います。

:first-child, :first-of-type

兄弟要素のうち最初の要素を指定します。
■□□□□□□□□□□

:last-child, :last-of-type

兄弟要素のうち最後の要素を指定します。
□□□□□□□□□□■

:nth-child(A), :nth-of-type(A)

兄弟要素のうちA番目の要素を指定します。
□□■□□□□□□□□

:nth-last-child(n), :nth-last-of-type(n)

兄弟要素のうち最後からn番目の要素を指定します。
□□□□□□□□■□□

:nth-child(-n+A), :nth-of-type(-n+A)

兄弟要素のうち先頭からA個の要素を指定します。
■■■□□□□□□□□

:nth-child(n+A), :nth-of-type(n+A)

兄弟要素のうちA番目から最後までの要素を指定します。
□□□□□■■■■■■

:nth-last-child(-n+A), :nth-last-of-type(-n+A)

兄弟要素のうち最後からA個の要素を指定します。
□□□□□■■■■■■

:nth-last-child(n+A), :nth-last-of-type(n+A)

兄弟要素のうち最後からA番目以前を指定します。
■■■■■■□□□□□

:nth-child(An), :nth-of-type(An)

兄弟要素のうちAの倍数番目の要素を指定します。
■□□■□□■□□■

:nth-child(odd), :nth-of-type(odd)

兄弟要素のうち奇数番目の要素を指定します。
■□■□■□■□■□

:nth-child(even), :nth-of-type(even)

兄弟要素のうち偶数番目の要素を指定します。
□■□■□■□■□■

:nth-child・:nth-of-typeの違い

最後にnth-childとnth-of-typeの違いについてです。
nth-childは要素の種類に関係なく何番目かを判別します。
nth-of-typeのほうは指定した要素の何番目であるかを判別します。

例えば以下のようなHTMLがあったとします。

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

nth-childを使ってみましょう。

dd:nth-child(even) {
  border: 2px solid orange;
}

この場合、Tomatoes・Mushrooms・Apples・Pearsの4つにスタイルが適用されます。
要素の種類が無視されていることが分かります。

次にnth-of-typeを使ってみます。

dd:nth-of-type(even) {
  border: 2px solid orange;
}

するとCucumbers・Apples・Pearsにスタイルが適用されました。

つまり、要素の種類が混在していた場合、nth-childではA番目の要素であり、尚且つ指定した要素種類であった場合に適用されます。
対してnth-of-typeは指定した要素の種類のうち何番目かで判別されスタイルが適用されることになります。

以上がnth-child・nth-of-type等の使い方になりますが、上手く使えば非常に便利です。
是非活用してみてください。

:nth-child() – CSS: カスケーディングスタイルシート | MDN
:nth-of-type() – CSS: カスケーディングスタイルシート | MDN