CSS

擬似クラス「:first-child」「:last-child」はどうして効かない??

スタイルシートって効いたり効かなかったり、いまいち分からないプロパティってありますよね。今回は、その中でも典型的なもののひとつ擬似クラス「:last-child」「:last-child」を徹底解剖していきたいと思います。この2つは「first」か「last」かの違いだけで、基本的に同じ原理ではたらくプロパティですので、どちらでお悩みの方も参考にしてくださいね。

失敗例1:最後のセルだけ変えたいのに全部変わってしまう

これはtableを使って私が間違えた例です。

ボタンで表示を切り替えてご覧ください。

See the Pen last-child01 by kenichi (@ken81) on CodePen.

テーブルを組んだあと、スタイルシートに

td:last-child{background:#b2ffd8;}

と記入して、最後のtd要素だけに背景色を付けたかったのですがうまくいきません。結果としては、すべてに色が付いてしまいました。なぜ、全てのセルに色が付いてしまったのでしょうか?

これは、「child(子ども)」という名前の通り、要素を家族構成として見てみると分かりやすいです。td要素が「子ども」だとしたら、その親は誰だと思いますか?

table要素?

違います。

下のコードを見てみてください。

<table>
  <tr>
    <td>セル1</td>
  </tr>
  <tr>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
  </tr>
  <tr>
    <td>セル5</td>
  </tr>
</table>

td要素の親はtr要素なのです。
つまり、テーブル一家の家族構成は次のようになっています。

table: 祖父・祖母
tr: 親
td: 子ども

そもそもtdtableの子ども(child)ではなく「孫」なのです。最後のtd要素に色を付けたいのであれば、(こんな疑似クラスはありませんが)「last-grandchild(嘘)」でなければいけなくなってしまいます。

全てのセルに色が付いた理由は、 もう一度ソースを見てみましょう。

<table>
  <tr>
    <td>セル1</td>
  </tr>
  <tr>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
  </tr>
  <tr>
    <td>セル5</td>
  </tr>
</table>

このテーブル一家には、tableおばあちゃんに5人の子ども(tr)がいるのが分かります。そして、それぞれの子どもたち(tr)に、さらに子どもが一人ずついることになります。tdたちはみんな一人っ子なので、みんな「最後の子ども」でもあるわけです。つまり、みんな「last-child」に該当するため、すべてのセルに色が付いたというわけです。

もし、今回の例で一番最後のセルに色を付けたい場合、セレクタにtd要素ではなく、tr要素を指定してtr:last-childとするか、もしくはtd要素を指定したい場合、tr:last-child tdと書きます。

See the Pen last-child02 by kenichi (@ken81) on CodePen.

tableが親でその子ども(tr)が5人いて、最後の子ども、つまり末っ子だけに色が付きました。

:last-childのルール

  1. セレクタは、デザインを変えたい要素を指定(classは使えません)。
  2. セレクタで指定した要素がその親要素に対する最後の子要素(つまり、末っ子)でないといけません。

失敗例2:first-childがうんともすんとも言わない

次は「first-child」の失敗例を見てみましょう。

See the Pen first-child01 by ken (@ken81) on CodePen.

スタイルシートに

p:first-child{color:red;}

と記入して、最初のp要素を赤くしたいのになってくれない例です。この書き方の間違いは、「最初のp要素を赤くしたい」という考え方がズレている点にあります。先ほどと同じように家族構成でみてみましょう。

ここのdiv一家には、4人の子どもたちがいます。

div: 親
h2: 長男
p: 次男
p: 三男
p: 四男

そして、この一族の第一子(first-child)はh2なのです。つまり、ここでのfirst-childpではなくてh2なので、この書き方ではうんともすんとも言ってくれないのです。

p:first-child{color:red;}

上記のスタイルシートの意味は、「最初のp要素」ではなくて、「第一子であるp要素」という意味だと思ってください。先ほどのHTMLには、「第一子であるp要素」はどこにも存在しなかったので、デザインが適用されませんでした。

:first-childのルール

  1. セレクタは、デザインを変えたい要素を指定(classは使えません)。
  2. セレクタで指定した要素がその親要素に対する最初の子要素(つまり、第一子)でないといけません。

:first-child:last-childが使えないケースの場合は、無理して使うことににこだわるよりも、別の擬似クラスやclass属性を使った方がスムーズになるケースも少なくありません。

:first-childは要素の種類に関わらず「第一子」であること。
:last-childは要素の種類に関わらず「末っ子」であること。

上記の2つの条件を頭に入れて、コーディングをすると失敗するケースも少なくなってくると思います。
この記事がみなさんのお役に立てたなら嬉しいです。最後までお読みいただきありがとうございました。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP