CSSでnth-childが効かない場合の対処方法について解説!【サンプルコード付き】

悩んでいる人

疑似要素のfirst-childやnth-childが効かないだけど、、

本記事では、このような悩みを解決致します。

本記事の信頼性

30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
ShopifyやWordPressのお仕事をすることが多いのですが、現在フリーランスとして働きながら、WEB開発の学習をしております。

僕自身も過去にこれで苦しめられた経験があったので、、、

意味がわかれば

悩んでいる人

そういうことね!

となるので、安心してください。

スポンサーリンク

目次

解説

やりたいこととして、「人参」「大根」「キャベツ」の文字の色を変更することです。

NGコード

See the Pen nth-child 効かないNG by TakahiroOkada (@okalog) on CodePen.

OKコード

See the Pen Untitled by TakahiroOkada (@okalog) on CodePen.

.item-link::first-child{
  color:red;
}

NG例だと下記のようにしております。

<ul class="list">
  <li class="item">
    <h2 class="title">人参</h2>
    <span>100円</span>
  </li>
  <li class="item">
    <h2 class="title">大根</h2>
    <span>200円</span>
  </li>
  <li class="item">
    <h2 class="title">キャベツ</h2>
    <span>300円</span>
  </li>
</ul>
.title:nth-child(1){
  color:red;
}
.title:nth-child(2){
  color:blue;
}
.title:nth-child(3){
  color:green;
}

nth-childを指定するときは同列の階層のものに対して行う必要があるので、上記の記述だとうまく指定できていなんですね。

なので、同列になっているのは<li class="item">になるので、そこに対してnth-childを指定してあげる必要があったのです。

下記のように、 .itemに対してnth-childを指定してあげれば、CSSが正しく効きます。

.item:nth-child(1) .title{
  color:red;
}
.item:nth-child(2) .title{
  color:blue;
}
.item:nth-child(3) .title{
  color:green;
}

まとめ

オンラインスクールデイトラでWEB制作コースのメンターをやらせてもらっているのですが、結構ここのポイントを知らずに

考える人

nth-childが効かないのですが、どうしてですか?
もう何日も悩んでいます。

という受講生が多くいるんですね。

僕も学習当時CSSへの理解が浅く思うように動かないことがあったので、参考になれば幸いです^^

オカ

僕が勉強したデイトラ、そして現在ではメンターをさしてもらっているのですが、かなりコスパよくWEB制作の学習を進めることができます。
簡単ではないですが、技術力はしっかりつくのでおすすめですよー

デイトラとは?

業界最安級でWEBスキルを学ぶことができるオンラインスクールになります。

LPを見るだけで楽しく学習できそうですよね^^

特徴的なのが1日1題のステップで学習を進めることができるので、忙しい社会人や子育て世代の方も多く受講しています。

また、業界最安級ということでどのコースも10万円以内で受講できるというのも人気の理由の1つです!

また、メンターと呼ばれるそのコースのプロフェッショナルが学習をサポートしてくれるので、安心して学習を進めることができます。

オンラインスクールなので、いつ・どこでも自分のペースで学習を進めることができるのも魅力ですね!

あと、個人的にかなり魅力を感じているのが、”閲覧無制限&アップデートされるカリキュラム”という点です!
閲覧無制限なので、教材をやり終えたけどまた見たいと思ったらいつでも見ることができます。
そして、日々教材がアップデートされているのですが、追加コンテンツもお金を払わずに見ることができます!!!

Twitterでも#デイトラをつけて呟いている人が多くいるので、一緒に学習する仲間も見つけやすいので楽しく学習を進めることができると思います!

デイトラは、教材アップデートのタイミングで教材の値段があがることがあります。(当たり前か)
けど、既に買っている人は追加のお金を払わずに見ることができる。

ということで、もし迷っているなら値段が高くなっていく前に購入するのがオススメなのです^^
迷っている時間も勿体ないですしね。その間に他の人はどんどん新しいことを学んでいるという…。

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次