擬似クラス :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;
}
と記述するのと同じことになる。
属性で指定しても属性ごとの順番ではなく、要素ごとの順番となるので注意しましょう。