:nth-of-type()は属性ではなく要素に適用される

擬似クラス :nth-of-type() について少し勘違いをしていたのでメモ。

<section>
  <div>要素1</div>
  <div class="item">要素2</div>
  <div class="item">要素3</div>
</section>

ここで要素2のみ違うスタイルを適用しようと思い、

.item:nth-of-type(1) {
  color: red;
}

としたが、これはどの要素にも適用されなかった。
itemというclassを持つ要素の1つ目(要素2)という意味合いでセレクタを指定したが、
実際は1つ目のdiv(要素1)で、かつ、itemというclassを持つものという解釈になるみたい。
つまり、

div:nth-of-type(1).item {
  color: red;
}

と記述するのと同じことになる。
属性で指定しても属性ごとの順番ではなく、要素ごとの順番となるので注意しましょう。