リストもそうですけど、最初と最後に指示を出したいときに

 

:first-child
:last-child

 

をよく使います。

 

だけど、これ以外にも

 

:first-of-type
:last-of-type
 

というものが存在します。

 

例えば、<dl>の場合一番最初の<dt>に

 

dt:first-child{}

 

は効いても

 

dd:first-child{}

 

にはcssは効いてくれません。

理由は、〇〇-childは、子要素の一番最初と一番最後にしか効かないから。

この場合<dd>の一行目は順番として<dt>の次になるのでcssが効かないということになります。

 

じゃ、その場合、確実にcssを効かすには

:first-of-type
こちらを使うことになります。

 

(×)dd:first-child{}

(〇)dd:first-of-type{}

 

こういう感じです。

 

その逆もありまして、<dl>内の複数<dt><dd>の最後になる<dt>

 

dt:last-child

 

これがcssが効かなくなります。

理由は先程の逆で、今度は最後の<dd>が本当の一番最後になるからです。

なので

 

(×)dt:last-child{}

(〇)dt:last-of-type{}

 

こちらでcssが効いてくれます。

 

 

:first-of-type
特定の子要素の中で、最初の子要素のみに適用される。
(dl要素のテーブルの場合、dtとdd共に使用可能)

:last-of-type
特定の子要素の中で、最後の子要素のみに適用される。
(dl要素のテーブルの場合、dtとdd共に使用可能)



:first-child
親要素に対するすべての子要素の中で、最初の子要素のみに適用される。

:last-child
親要素に対するすべての子要素の中で、最後の子要素のみに適用される。