CSSの:first-childや:last-childが効かない場合の対処法!

CSSの:first-childや:last-childが効かないというケースはよくあります。今回は:first-childや:last-childが効かない場合の対処法についてサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1CSSの:first-childや:last-childが効かない問題
  2. 2CSSの:first-childや:last-childが効かない場合の対処法
  3. 2.1:first-childと:last-childの使い方を勘違いしている場合
  4. 2.2:first-child、:last-childを親に適用してしまっている

CSSの:first-childや:last-childが効かない問題

CSSの:first-child:last-childは擬似クラスと呼ばれるものでそれぞれ

  • :first-childは兄弟要素の最初の要素
  • :last-childは兄弟要素の最後の要素
を表します。

:first-child
CSSの:first-childは兄弟要素の中で最初の要素を表す擬似クラスです。:first-childの構文や使い方、:first-of-typeとの違いについてサンプルコード付きで解説します。
:last-child
CSSの:last-childは兄弟要素のグループ内の最後の要素を表す擬似クラスです。:last-childの使い方や構文についてサンプルコード付きで解説します。

これらの擬似クラスを使い、指定した要素にスタイルを付けていきたいところですが、:first-child:last-childを設定しているのに効かない問題に直面することがあります。

そこで今回は:first-child:last-childを設定しているのに効かない問題の対処法をサンプルコード付きで解説していきます。

Photo byjamesmarkosborne

CSSの:first-childや:last-childが効かない場合の対処法

:first-childと:last-childの使い方を勘違いしている場合

まず下記のサンプルコードを見てみましょう。

このサンプルコードでテキストの色が変わるのはどの要素でしょうか?「RUN」ボタンを押すとサンプルコードの結果を見ることが出来ます。

答えはどの要素も色が変わりません。p:first-childp:last-childが設定されているのに、なぜスタイルが効かないかと言うと:first-childと:last-childも兄弟要素のグループ内の「最初の要素」や「最後の要素」を表しているからです。

つまり今div要素の中に複数の要素が並んでいますが、最初の要素、最後の要素はいずれもh1要素です。つまりp:first-childp: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-of-type
CSSの:first-of-typeは擬似クラスの1つで、兄弟要素のグループ内の「その要素」の最初の要素を表します。この「その要素」とは何か、構文や使い方をサンプルコード付きで解説します。
:last-of-type
CSSの:last-of-typeは擬似クラスの1つで、兄弟要素のグループ内の「その要素」の最後の要素を表します。この「その要素」とは何か、構文や使い方をサンプルコード付きで解説します。
:nth-of-type
CSSの:nth-of-typeは擬似クラスの1つで、兄弟要素のグループ内の「その要素」のn番目の要素を表します。:nth-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要素の色が赤になります。

GeekHive採用サイト

関連記事