HTML

<main>
  <h1>見出し</h1>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
  <h2>見出し</h2>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
  <h2>見出し</h2>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
  <p>こんにちは。</p>
</main>

CSS

main > h2:nth-of-type(odd) {
  background-color: pink;
}

このように CSS で指定しているのですが、 even の場合は上の h1 を入れて 10 番目の h2 に背景色が付くのですが、 odd で指定した場合、 h1 を入れて四番目の h2 タグに背景色が付きます。
なぜでしょうか？