2025.1.13
最後の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>が該当する。
last-of-type
親要素に対して特定の子要素の中で一番最後の要素を選択する。
<dt>dt3</dt>を指定したい場合は、dt:last-of-typeを使用する。
first-childとfirst-of-typeについても
同じ考え方であるが、first-childは親要素に対して全ての子要素の中で一番最初の要素で、first-of-typeは親要素に対して特定の子要素の中で一番最初の要素を指定する。
まとめ
下記の表が分かりやすかったのでお借りします。
