【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)と同じ意味である。


【新しい記事】

【古い記事】

コメントを残す

メールアドレスが公開されることはありません。