🤧

nth-of-type(n)を勘違いしていた

に公開

こうだと思っていた

<div class="hoge">0<div>
<div class="fuga">1</div>
<div class="piyo">2</div>
<div class="piyo">3</div> ←ここの文字を赤にしたい
<div class="piyo">4</div>
.piyo {
   &:nth-of-type(2) {
       color: red;
   }
}

なんか効かないなあ…とは思っていた。が放置していた。

nth-of-type(n)とは

ちゃんと調べた。
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:nth-of-type

同じ型(タグ名)の兄弟要素の中で、その位置に基づいて要素を照合します。

あくまで要素を見ているので、この場合だとn番目のdiv要素という意味になる。
決してpiyoのn番目という指定にはならない。

Discussion