悩んでいる人疑似要素のfirst-childやnth-childが効かないだけど、、
本記事では、このような悩みを解決致します。
本記事の信頼性
30歳から異業種への転職をして、Shopify Experts企業で1年半ほどフルリモートで勤務していました。
現在は名古屋の自社開発企業のフロントエンドエンジニアしています。フリーランスとしても活動しています。
僕自身も過去にこれで苦しめられた経験があったので、、、
意味がわかれば
悩んでいる人そういうことね！
となるので、安心してください。
解説
やりたいこととして、「人参」「大根」「キャベツ」の文字の色を変更することです。
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>２００円</span>
</li>
<li class="item">
<h2 class="title">キャベツ</h2>
<span>３00円</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スキルを学ぶことができるオンラインスクールになります。
特徴的なのが1日1題のステップで学習を進めることができるので、忙しい社会人や子育て世代の方も多く受講しています。
また、業界最安級ということでどのコースも10万円以内で受講できるというのも人気の理由の1つです！
また、メンターと呼ばれるそのコースのプロフェッショナルが学習をサポートしてくれるので、安心して学習を進めることができます。
オンラインスクールなので、いつ・どこでも自分のペースで学習を進めることができるのも魅力ですね！
あと、個人的にかなり魅力を感じているのが、”閲覧無制限＆アップデートされるカリキュラム”という点です！
閲覧無制限なので、教材をやり終えたけどまた見たいと思ったらいつでも見ることができます。
そして、日々教材がアップデートされているのですが、追加コンテンツもお金を払わずに見ることができます！！！
Twitterでも#デイトラをつけて呟いている人が多くいるので、一緒に学習する仲間も見つけやすいので楽しく学習を進めることができると思います！
