【CSS】疑似要素:first-childが効かない時→実はfirst(1番目)じゃないパターン【備忘録】

制作・ハック

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

コメント

タイトルとURLをコピーしました