[解決済み] first-childと:first-of-typeの違いは何ですか？

質問

の区別がつきません。 element:first-child と element:first-of-type

例えば、Divの

div:first-child

→ 全て <div> 要素で、その親の最初の子であるもの。

div:first-of-type

→ 全て <div> 要素で、最初の <div> 要素で、その親の最初の

これは全く同じことのように思えますが、動作が異なります。

どなたか説明していただけませんか？

どのように解決するのですか？

親要素は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 と :first-of-type は、その :first-of-type はその要素タイプの最初の要素にマッチし、HTMLではそのタグ名で表されます。 の最初の子要素でない場合でも、その要素にマッチします。 . ここまでのところ、私たちが見ている子要素はすべて div ですが、我慢してください。

今のところ、逆もまた真なりです：任意の :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 . もし他の div 要素がある場合、その最初の子である div 要素にマッチします。 div:first-of-type . この例では、2 番目の子が最初の div に変更された後、最初の子プロセスが h1 :

<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 にマッチする子要素を一度にいくつでも持つことができ、また持つことになります。 :first-of-type 擬似クラスと同じ数の子を持つことができ、また、持つことになります。この例では、セレクタ .parent > :first-of-type (暗黙の * を修飾する :first-of-type 擬似) にマッチします。 に 要素にマッチします。

<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 : いずれも :last-child は必然的に :last-of-type であり、その親の中でそれに続く他の要素が全くないためです。しかし、最後の div は最後の子でもあるので h1 はその型の最後の子であるにもかかわらず、最後の子であることはできません。

:nth-child() そして :nth-of-type() は、任意の整数の引数で使用された場合、原理的には非常によく似た働きをします（たとえば :nth-child(1) がマッチする要素の数が異なるだけです。 :nth-of-type() . これについては p:nth-child(2) と p:nth-of-type(2) の違いは何ですか？