:first-child と :first-of-type の違いは何ですか? 質問する

Question

親要素には 1 つ以上の子要素を含めることができます。

<div class="parent">
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

これらの子のうち、1人だけが最初になることができます。これは次のように一致します:first-child。

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

:first-childとの違いは、HTMLではタグ名で表される要素タイプの最初の要素に一致する:first-of-typeことです。:first-of-typeその要素が親の最初の子ではない場合でもこれまで見てきた子要素はすべてdivs でしたが、これについては後ほど説明します。

今のところ、逆も成り立ちます。つまり、any:first-childも必然的に成り立ちます:first-of-type。ここで最初の子は最初のでもあるので、div両方疑似クラスと型セレクタdiv:

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

ここで、最初の子の型をからdivなどの別のものに変更するとh1、最初の子はのままですが、明らかに最初のではなくなります。div代わりに、最初の (そして唯一の) になります。同じ親内でこの最初の子の後にh1他の要素がある場合、それらの要素の最初のものがと一致します。上記の例では、最初の子がに変更された後、2 番目の子が最初のになります。divdivdiv:first-of-typedivh1

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

:first-childはと同等であることに注意してください:nth-child(1)。

:first-childこれは、どの要素も一度に1つの子要素しか一致しないが、:first-of-typeその要素が持つ子の種類の数と同じ数の擬似クラスに一致する子を持つことができることも意味します。この例では、セレクタ.parent > :first-of-type（擬似クラスを暗黙的に*修飾する:first-of-type）は、二要素は 1 つだけではありません。

<div class="parent">
  <h1>Child</h1>   <!-- .parent > :first-of-type -->
  <div>Child</div> <!-- .parent > :first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

同じことが:last-childおよびにも当てはまります:last-of-type。any は:last-child必然的にでもあります:last-of-type。なぜなら、その親内には他に 1 つの要素も続かないからです。しかし、最後のはdiv最後の子でもあるため、はh1その型の最後であるにもかかわらず、最後の子にはなり得ません。

:nth-child()とは、:nth-of-type()任意の整数引数（:nth-child(1)上記の例のように）で使用される場合、原理的には非常によく似た機能を果たしますが、とが一致する要素の潜在的な数が異なる点です:nth-of-type()。これについては、p:nth-child(2)とp:nth-of-type(2)の違いは何ですか？

Answer 1