nth-of-typeの注意点

現象

以下のコードでメニュー2でなく、メニュー1が赤くなる。

<style>
.menu:nth-of-type(2) {
color : red;
}
</style>

<div id="sub-contents">
<div id="profile">プロフィール</div>
<div class="menu">メニュー1</div>
<div class="menu">メニュー2</div>
</div>

原因

以下の意味となる。

  • n番目のelementに適用
  • 指定したclass、idがある場合、n番目のelementに含まれるclass、idに適用。
element.class:nth-of-type(n)

結果、2番目の<div>が対象となる。