【CSS】nth-of-type(n)はクラスに指定しても効かない？

概要

よく勘違いしてしまうのだが、CSSの擬似クラスnth-of-type(n)はクラスに指定した場合でもnの対象としてカウントされるのは要素(タグ)である。

サンプル

<ul>
<li class="hoge">11111</li>
<li>22222</li>
<li class="hoge">33333</li>
<li class="hoge">44444</li>
<li class="hoge">55555</li>
<li class="hoge">66666</li>
</ul>

.hoge:nth-of-type(2),
.hoge:nth-of-type(5) {
  color: red;
}

上記ソースをブラウザで表示すると、赤字で表示されるのは55555である。

• 11111
• 22222
• 33333
• 44444
• 55555
• 66666

.hoge:nth-of-type(2)は2つ目のliにクラスhogeがないので無視される。
.hoge:nth-of-type(5)は5つ目のliにクラスhogeがあるので、スタイルが適用される。

つまり、この場合の.hoge:nth-of-type(n)はli.hoge:nth-of-type(n)と同じ意味である。

クラスが異なる要素(タグ)に使われている場合

<dl>
<dt class="hoge">11111</dt>
<dt>22222</dt>
<dt class="hoge">33333</dt>
<dt class="hoge">44444</dt>
<dt class="hoge">55555</dt>
<dd class="hoge">66666</dd>
<dd class="hoge">77777</dd>
<dd class="hoge">88888</dd>
<dd class="hoge">99999</dd>
<dd>00000</dd>
</dl>

.hoge:nth-of-type(2),
.hoge:nth-of-type(5) {
  color: red;
}

上記ソースをブラウザで表示すると、赤字で表示されるのは55555と77777である。

11111

22222

33333

44444

55555

66666

77777

88888

99999

00000

.hoge:nth-of-type(2)は2つ目のdtにクラスhogeがないので無視されるが、2つ目のddにはクラスhogeがあるのでスタイルが適用される。
.hoge:nth-of-type(5)は5つ目のdtにクラスhogeがあるのでスタイルが適用されるが、5つ目のddにはクラスhogeがないので無視される。

つまり、この場合の.hoge:nth-of-type(n)はdt.hoge:nth-of-type(n), dd.hoge:nth-of-type(n)と同じ意味である。