Posted at

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

More than 3 years have passed since last update.

擬似クラス :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;
}

と記述するのと同じことになる。

属性で指定しても属性ごとの順番ではなく、要素ごとの順番となるので注意しましょう。