どうも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; } 結果 おはよう おはよう おやすみ おやすみ おやすみ じゃあクラス名基準でx番目の要素にCSSを当てるには？ 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要素を増やすなどでしっかりと住み分けできるものは住み分けさせる方が一番理想的な形かもしれませんね。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ 参考 https://pisuke-code.com/css-nth-child-class-not-working/ https://teratail.com/questions/9634
「x番目の要素にだけCSSを適応」
このようにある特定の要素にだけCSSを適応したい時によく使われるのが
・nth-child() ・nth-of-type()
ですが、今回はこのnth-of-type()についての罠の話です。
うまくいかない例
<div class="asa">おはよう</div> <div class="asa">おはよう</div> <div class="yoru">おやすみ</div> <div class="yoru">おやすみ</div> <div class="yoru">おやすみ</div>
.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の使い方例
<div>おはよう</div> <div>おはよう</div> <p>おやすみ</p> <p>おやすみ</p> <p>おやすみ</p>
p:nth-of-type(2) { color: red; }
結果
javascriptのeqを使ってx番目の要素を取得することができます。
eq
クラス名基準でx番目の要素に任意のクラス（.hoge）を付与して、そのクラス専用のCSSを予めCSSで用意する方法が良いかなと思います。
※eqは0からカウントが始まるので、「2番目の要素」にしたいときは「eq(1)」と書かなければなりません！
/* .hogeのクラスがついているものにだけ追加のCSSを用意 */ .hoge { color: red; }
$('.yoru:eq(1)').addClass('hoge'); //もしくは $('.yoru').eq(1).addClass('hoge'); //もしくは $($('.yoru').get(1)).addClass('hoge');
実はsafariにのみ、ofフィルターと呼ばれるようなものがあり特定の条件を満たす要素のみカウントさせることができるようです。 ただsafariだけなので、実用的ではないので現状クラス名基準でx番目を指定するのであればjavascriptを使うのが一番最適な方法です。
クラス名を沢山つけすぎてもややこしくなる場合があり開発が困難になるのであれば、div要素を増やすなどでしっかりと住み分けできるものは住み分けさせる方が一番理想的な形かもしれませんね。
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
参考 https://pisuke-code.com/css-nth-child-class-not-working/ https://teratail.com/questions/9634
対象者 ・バックエンドエンジニアを志す人 ・web開発初学者 ・ECサイトを作成しようと思っている人 はじめに こんにちは！2021年がはじまりました。 この投稿はその③の続きです。 その③では一通りのざっくりとしたhtmlとcssを書いたところまででした。 今回はDB設計とバックエンド機能の設計を進めていきます。 目次 1.今回の作業報告 2.反省点 3.次回までの目標 1.今回の作業報告 年末から年始12月26日から1月8日までざっくりまとめます。 意気揚々とhtml、cssを書きましたが・・・・ 年末にDBを取り組んで撃沈。 そこから別件でも追われ気持ち的に着手できませんでした(反省) テーブルを作成しました。 データ型についてこだわるべきなのかもしれませんが動けば良しでいきます。 会員登録するところでエラー。ググルもなかなか解決することができず(,が抜けてただけだった・・)ここでかなり時間を溶かしてしまいました。 商品で検索の機能を実装することができました。(いつかいい感じの画像にしますｗ) 2.反省点 1.エラーを放置してしまった。 2.有識者がいるなかで聞けずにいたところ とりあえず大きく2点ですね。 ググりはしたものの3日ぐらい溶かしてそのまま放置してしまいました。 自分で解決できないのであれば有識者にヒントもらうなりする必要があったと思いました。 まあ、自分で解決できればそれに越したことないと思いますが・・・ 3.次のステップ：機能の優先順位洗い出し。引き続き実装！ 幸いにも前工程で予定していたスケジュールより早かったために大きくスケジュール変更をしなくてよさそうです。別でプロダクトの開発選手権があるのでそちらのスケジュールと両立をやりきります。 ものすごく簡単ですが今回はこのへんで！(プロダクト開発に時間をさきます)
・バックエンドエンジニアを志す人 ・web開発初学者 ・ECサイトを作成しようと思っている人
こんにちは！2021年がはじまりました。 この投稿はその③の続きです。
その③では一通りのざっくりとしたhtmlとcssを書いたところまででした。 今回はDB設計とバックエンド機能の設計を進めていきます。
1.今回の作業報告 2.反省点 3.次回までの目標
年末から年始12月26日から1月8日までざっくりまとめます。 意気揚々とhtml、cssを書きましたが・・・・
年末にDBを取り組んで撃沈。 そこから別件でも追われ気持ち的に着手できませんでした(反省)
テーブルを作成しました。 データ型についてこだわるべきなのかもしれませんが動けば良しでいきます。
会員登録するところでエラー。ググルもなかなか解決することができず(,が抜けてただけだった・・)ここでかなり時間を溶かしてしまいました。
商品で検索の機能を実装することができました。(いつかいい感じの画像にしますｗ)
1.エラーを放置してしまった。 2.有識者がいるなかで聞けずにいたところ
とりあえず大きく2点ですね。 ググりはしたものの3日ぐらい溶かしてそのまま放置してしまいました。 自分で解決できないのであれば有識者にヒントもらうなりする必要があったと思いました。 まあ、自分で解決できればそれに越したことないと思いますが・・・
幸いにも前工程で予定していたスケジュールより早かったために大きくスケジュール変更をしなくてよさそうです。別でプロダクトの開発選手権があるのでそちらのスケジュールと両立をやりきります。
ものすごく簡単ですが今回はこのへんで！(プロダクト開発に時間をさきます)
