結論：nth-of-typeはクラス名ではなくタグ名に基づいて参照している

コーディング中、nth-of-typeが想定する箇所に効かないという事態に遭遇しました。

その時の状況がざっくり以下のようなHTMLとCSSでした。

CSSでは”.container-item:nth-of-type(2)”を指定しているのに、なぜか2個目の<div class=”container-item”>（ダミーテキスト3）に効かないという……。

参照しているのはタグ名らしい

調べたところ、どうやら参照しているのはクラス名でなくタグ名であることが判明。

同階層に同じタグがある場合はそれもカウントされるようで、上記のHTMLの場合は、「”container-item”というクラスが3つある」という捉え方ではなく、「<div>が5つある」という捉え方が正解でした。

なので、正しくは以下の指定になります。

クラス名を指定していても、実際にはそのクラスがついているタグを数えているので、同じくnth-of-typeが効かずに困っている方は、今一度確認してみてください！