CSSの:last-child 擬似クラスはDOMのlastElementChildではない - yupaがエンジニアになるまでを記録するブログ

すこしハマったのでメモ。

<body>
  <h1>hoge</h1>
  <ul>
    <li>いー</li>
    <li>あーる</li>
    <li>さん</li>
    <li>ここを赤くしたい</li>
  </ul>
</body>

上記のようなHTMLに対し、最後のliを赤くしたいとき、

「ulの子要素のうちの最後の要素だしul :last-child{...って指定すればええんやろ」

と思ってDOMのlastElementChildのノリで指定しようと思ったがこれは間違いだった。正しくは以下

/* ul:last-child{  ...これは間違い */

li:last-child{
  color  : red;
}

兄弟要素のグループの中で最後の要素を表します。
:last-child - CSS: カスケーディングスタイルシート | MDN

とあるので、今回の場合兄弟関係である<li>自体を指定する。

もう一つ例を。

<body>
  <h1>hoge</h1>
  <ul>
      <li><span>いー</span></li>
      <li><span>あーる</span></li>
      <li><span>さん</span></li>
      <li><span>ここだけ青</span></li>
  </ul>
</body>

<li>の中にインライン要素があって、最後の<li>の中の<span>内のテキストにスタイルを指定したい場合、li span:last-child{は間違い。正しくは、

/*li span:last-child{  ...これは間違い */

li:last-child  span{
  color  : blue;
}

今回の場合、それぞれの<span>は兄弟を持たない一人っ子なので、間違った例だと全てのテキストが青くなってしまう。なので先に兄弟関係である<li>を指定したあと、<span>を指定する。

その他、:first-childや:nth-child()等も同様、兄弟要素に対する指定なので注意したい。

以上の内容をまとめたCodePen

See the Pen 20180813_CSS_:last-childセレクタについて by yupa-eg (@yupa-eg) on CodePen.