More than 3 years have passed since last update.

【初心者でもわかる】nth-of-typeはクラス名基準でx番目指定できない・・・からjsでなんとかする方法

Last updated at 2021-01-09Posted at 2021-01-08

#どうも7noteです。初心者が陥りやすい、nth-of-typeの罠。

「x番目の要素にだけCSSを適応」

このようにある特定の要素にだけCSSを適応したい時によく使われるのが

・nth-child()
・nth-of-type()

ですが、今回はこのnth-of-type()についての罠の話です。

「クラス名（.hogehoge）のx番目」という指定はできない！

うまくいかない例

index.html

<div class="asa">おはよう</div>
<div class="asa">おはよう</div>
<div class="yoru">おやすみ</div>
<div class="yoru">おやすみ</div>
<div class="yoru">おやすみ</div>

style.css

.yoru:nth-of-type(2) {
  color: red;
}

イメージでは、*「クラス[yoru]がついているの2つ目が赤色になる！」*と思いますが、実際にはどれも色は変わりません。

うまくいかなかった結果

おはよう
おはよう
おやすみ
おやすみ
おやすみ

そもそも、、、

~~「クラス名を基準にしてx番目の指定」はできない！！！~~

訂正→***「同一要素(div)のx番目が特定のクラス（.yoru）の場合」にしか効かない***

意外と気付きにくいものです。
私もずっと上手くいかなくて調べてもnth-childとnth-of-typeの比較記事しかでなくて原因の調査に時間がかかりました。。。

追記：コメントでnth-of-type()について更に詳しく教えていただきましたのでそちらもご覧ください。↓↓↓

つまりは、

「nth-of-type()は、クラス名ではなく要素そのものを基準に何番目かを計算して動いている」

ということになります。

nth-of-typeの使い方例

index.html

<div>おはよう</div>
<div>おはよう</div>
<p>おやすみ</p>
<p>おやすみ</p>
<p>おやすみ</p>

style.css

p:nth-of-type(2) {
  color: red;
}

結果

おはよう
おはよう
おやすみ
おやすみ
おやすみ

javascriptのeqを使ってx番目の要素を取得することができます。

クラス名基準でx番目の要素に任意のクラス（.hoge）を付与して、そのクラス専用のCSSを予めCSSで用意する方法が良いかなと思います。

※eqは0からカウントが始まるので、「2番目の要素」にしたいときは「eq(1)」と書かなければなりません！

style.css

/* .hogeのクラスがついているものにだけ追加のCSSを用意 */
.hoge {
  color: red;
}

script.js

$('.yoru:eq(1)').addClass('hoge');
//もしくは
$('.yoru').eq(1).addClass('hoge');
//もしくは
$($('.yoru').get(1)).addClass('hoge');

実はsafariにのみ、ofフィルターと呼ばれるようなものがあり特定の条件を満たす要素のみカウントさせることができるようです。
ただsafariだけなので、実用的ではないので現状クラス名基準でx番目を指定するのであればjavascriptを使うのが一番最適な方法です。

クラス名を沢山つけすぎてもややこしくなる場合があり開発が困難になるのであれば、div要素を増やすなどでしっかりと住み分けできるものは住み分けさせる方が一番理想的な形かもしれませんね。