最後のdtタグにlast-childのCSSが適用されない -last-chilidとlast-of-typeの違い-【備忘録】

先日コーディングをしていたら、下記のようなHTMLコードで最後のdtタグに:last-childが利かなかったのでまとめ。

<dl>
   <dt>dt1</dt>
   <dd>dd1</dd>
   <dt>dt2</dt>
   <dd>dd2</dd>
   <dt>dt3</dt>
   <dd>dd3</dd>
</dl>

last-child

親要素に対して全ての子要素の中で一番最後の要素を選ぶ。

上記のコードの場合、<dd>dd3</dd>が該当する。

親要素に対して特定の子要素の中で一番最後の要素を選択する。

<dt>dt3</dt>を指定したい場合は、dt:last-of-typeを使用する。

同じ考え方であるが、first-childは親要素に対して全ての子要素の中で一番最初の要素で、first-of-typeは親要素に対して特定の子要素の中で一番最初の要素を指定する。

下記の表が分かりやすかったのでお借りします。