リストもそうですけど、最初と最後に指示を出したいときに
: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
親要素に対するすべての子要素の中で、最後の子要素のみに適用される。