スタイルシートって効いたり効かなかったり、いまいち分からないプロパティってありますよね。今回は、その中でも典型的なもののひとつ擬似クラス「:last-child」「:last-child」を徹底解剖していきたいと思います。この２つは「first」か「last」かの違いだけで、基本的に同じ原理ではたらくプロパティですので、どちらでお悩みの方も参考にしてくださいね。
コンテンツ
失敗例１：最後のセルだけ変えたいのに全部変わってしまう
これはtableを使って私が間違えた例です。
ボタンで表示を切り替えてご覧ください。
See the Pen last-child01 by kenichi (@ken81) on CodePen.
テーブルを組んだあと、スタイルシートに
td:last-child{background:#b2ffd8;}
と記入して、最後のtd要素だけに背景色を付けたかったのですがうまくいきません。結果としては、すべてに色が付いてしまいました。なぜ、全てのセルに色が付いてしまったのでしょうか？
これは、「child（子ども）」という名前の通り、要素を家族構成として見てみると分かりやすいです。td要素が「子ども」だとしたら、その親は誰だと思いますか？
table要素？
違います。
下のコードを見てみてください。
<table>
<tr>
<td>セル１</td>
</tr>
<tr>
<td>セル２</td>
</tr>
<tr>
<td>セル３</td>
</tr>
<tr>
<td>セル４</td>
</tr>
<tr>
<td>セル５</td>
</tr>
</table>
td要素の親はtr要素なのです。
つまり、テーブル一家の家族構成は次のようになっています。
table： 祖父・祖母
tr： 親
td： 子ども
そもそもtdはtableの子ども（child）ではなく「孫」なのです。最後のtd要素に色を付けたいのであれば、（こんな疑似クラスはありませんが）「last-grandchild（嘘）」でなければいけなくなってしまいます。
全てのセルに色が付いた理由は、 もう一度ソースを見てみましょう。
<table>
<tr>
<td>セル１</td>
</tr>
<tr>
<td>セル２</td>
</tr>
<tr>
<td>セル３</td>
</tr>
<tr>
<td>セル４</td>
</tr>
<tr>
<td>セル５</td>
</tr>
</table>
このテーブル一家には、tableおばあちゃんに５人の子ども（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）が５人いて、最後の子ども、つまり末っ子だけに色が付きました。
:last-childのルール
- セレクタは、デザインを変えたい要素を指定（classは使えません）。
- セレクタで指定した要素がその親要素に対する最後の子要素（つまり、末っ子）でないといけません。
失敗例２：first-childがうんともすんとも言わない
次は「first-child」の失敗例を見てみましょう。
See the Pen first-child01 by ken (@ken81) on CodePen.
スタイルシートに
p:first-child{color:red;}
と記入して、最初のp要素を赤くしたいのになってくれない例です。この書き方の間違いは、「最初のp要素を赤くしたい」という考え方がズレている点にあります。先ほどと同じように家族構成でみてみましょう。
ここのdiv一家には、４人の子どもたちがいます。
div： 親
h2： 長男
p： 次男
p： 三男
p： 四男
そして、この一族の第一子（first-child）はh2なのです。つまり、ここでのfirst-childはpではなくてh2なので、この書き方ではうんともすんとも言ってくれないのです。
p:first-child{color:red;}
上記のスタイルシートの意味は、「最初のp要素」ではなくて、「第一子であるp要素」という意味だと思ってください。先ほどのHTMLには、「第一子であるp要素」はどこにも存在しなかったので、デザインが適用されませんでした。
:first-childのルール
- セレクタは、デザインを変えたい要素を指定（classは使えません）。
- セレクタで指定した要素がその親要素に対する最初の子要素（つまり、第一子）でないといけません。
:first-childや:last-childが使えないケースの場合は、無理して使うことににこだわるよりも、別の擬似クラスやclass属性を使った方がスムーズになるケースも少なくありません。
:first-childは要素の種類に関わらず「第一子」であること。
:last-childは要素の種類に関わらず「末っ子」であること。
上記の２つの条件を頭に入れて、コーディングをすると失敗するケースも少なくなってくると思います。
この記事がみなさんのお役に立てたなら嬉しいです。最後までお読みいただきありがとうございました。
