CSSを使っていると「:first-child」や「:nth-child(1)」がうまく効かない時があります。
これが実は1番目を指定できていないパターンでした。
:first-childが効かない時
CSSでデザインを反映させようと
疑似要素の「:first-child」や「:nth-child(1)」など
要素の順番から指定する時がありますよね。
それが指定しているつもりなのに効かない時ありませんか？
私は今まで疑似要素をよくわかっておらず、効かない時に不思議に思っていました。
その時はクラス名指定などでなんとか対処していましたが、対処法がありました。
実はfirst（1番目）じゃない！？
それは「:first-child」や「:nth-child(1)」を
「:second-child」や「:nth-child(2)」など
数字を変えて試してみる！という方法です。
え？なんやそれ？ですよね笑
実はクラス名からさらに子要素の中でfirst1番目を指定していたつもりが、
それは1番目という扱いじゃなかったんですよね。
:first-childは全体のタグを含めた中の子要素
ググってみるとわかりやすい記事がいくつも見つかります。
どうやらクラス名などから指定した子要素の中からn番目というわけではなく、
全体のタグを含めた中の要素からfirst（1番目）という指定になるみたいです。
うまく説明できずすみません、、
別の数字で試してみるのが簡単な対処法
この話を見ても「ん？じゃあどうすれば特定の要素を指定できる？」と思った人は
とにかく:first-childとか:nth-child(1)から「別の数字」に変えてみてください！笑
これでひとまずはどうにかなります。
もちろん本当にピンポイントで特定の要素を指定したい場合は
初めから「クラス名」をつけて指定するのが一番確実ですね。
備忘録メモでした
今回は対処法とか解説というより、こういう時はこうしようという
自分用の備忘録メモという感じです。
丁寧な解説は別の方の記事をみてください。w
コメント