CSSの:first-childや:last-childが効かない場合の対処法!
CSSの:first-childや:last-childが効かないというケースはよくあります。今回は:first-childや:last-childが効かない場合の対処法についてサンプルコード付きで解説します。
CSSの:first-childや:last-childが効かない問題
CSSの:first-child
や:last-child
は擬似クラスと呼ばれるものでそれぞれ
- :first-childは兄弟要素の最初の要素
- :last-childは兄弟要素の最後の要素
これらの擬似クラスを使い、指定した要素にスタイルを付けていきたいところですが、:first-child
や:last-child
を設定しているのに効かない問題に直面することがあります。
そこで今回は:first-child
や:last-child
を設定しているのに効かない問題の対処法をサンプルコード付きで解説していきます。
CSSの:first-childや:last-childが効かない場合の対処法
:first-childと:last-childの使い方を勘違いしている場合
まず下記のサンプルコードを見てみましょう。
このサンプルコードでテキストの色が変わるのはどの要素でしょうか?「RUN」ボタンを押すとサンプルコードの結果を見ることが出来ます。
答えはどの要素も色が変わりません。p:first-child
とp:last-child
が設定されているのに、なぜスタイルが効かないかと言うと:first-childと:last-childも兄弟要素のグループ内の「最初の要素」や「最後の要素」を表しているからです。
つまり今div
要素の中に複数の要素が並んでいますが、最初の要素、最後の要素はいずれもh1要素です。つまりp:first-child
とp:last-child
に該当する要素はここでは存在していません。そのためスタイルが効かないのです。
では兄弟要素のグループ内の「最初のp
要素」「最後のp
要素」を指定するにはどうすればいいのか、下記のサンプルコードを見てみましょう。
上記のサンプルコードでは「最初のp
要素」「最後のp
要素」でちゃんとテキストの色が変わっているかと思います。
兄弟要素のグループ内の「最初のp
要素」「最後のp
要素」を表すには
p:first-of-type {
color: blue;
}
p:last-of-type {
color: red;
}
のように:first-of-type
と:last-of-type
を使用します。両者の詳しい使い方を知りたい方は下記を参考にしてみましょう。
:first-child、:last-childを親に適用してしまっている
次によくある:first-child
と:last-child
が効かない場合ですが、まずは下記のサンプルコードを見てみましょう。
.sample
の中身の最初の要素だけテキストの色を赤くしたい場合に上手く行かない例です。
上記のサンプルコードでは.sample:first-child
としていて、その結果全てのp
要素の色が赤に変わっています。
ここで.sample
の最初の要素の「段落1」のみの文字色を赤にするには下記のようにしましょう。
先程のとの差分は下記の通りです。
/* before */
.sample:first-child {
color: red;
}
/* after */
.sample :first-child {
color: red;
}
.sample
の後ろに半角スペースをつけています。
つまりbeforeの.sample:first-child
は「.sample
というクラス名を持った最初の要素」を指します。該当するのは親のdiv
要素ですので、親のdiv
要素のテキストの色が赤になり、その結果div
要素の内側にあるp
要素にもスタイルが継承され、文字色が全て赤となります。
一方後者では.sample :first-child
と半角スペースで区切られているため、.sample
のクラスセレクタの内側にある:first-child
(つまり最初の要素)を指し、該当する「段落1」のp要素の色が赤になります。