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

どうも7noteです。初心者が陥りやすい、nth-of-typeの罠。 「x番目の要素にだけCSSを適応」 このようにある特定の要素にだけCSSを適応したい時によく使われるのが ・nth-child() ・nth-of-type() ですが、今回はこのnth-of-type()についての罠の話です。 「クラス名（.hogehoge）のx番目」という指定はできない！ うまくいかない例 <div class="asa">おはよう</div> <div class="asa">おはよう</div> <div class="yoru">おやすみ</div> <div class="yoru">おやすみ</div> <div class="yoru">おやすみ</div> イメージでは、「クラス[yoru]がついているの2つ目が赤色になる！」と思いますが、実際にはどれも色は変わりません。 うまくいか