：first-childと：first-of-typeの違いは何ですか？

124

私は違いを伝えることができないelement:first-childとelement:first-of-type

たとえば、divがあったとします

div:first-child
→ <div>親の最初の子であるすべての要素。

div:first-of-type
→ 親の<div>最初の<div>要素であるすべての要素。

これはまったく同じように見えますが、動作が異なります。

誰かが説明してもらえますか？

css css-selectors

— ボルトクロック
ソース

最初の子は親の最初の子のみをターゲットにします。最初のタイプはそのタイプの最初の子をターゲットにします（divまたはspanまたはそれがターゲットにしようとしているもの）

— Huangism

最初の「div」の子には、より古い兄弟がいる可能性があります。first-of-typeは、タイプの最初の子であるため、このようなdivを選択します。first-childは、最初の子要素ではないため、そのdivを選択しません。

— n8bar

207

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

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

これらの子供たちの中で、彼らのうちの一人だけが最初になることができます。これは次と一致し: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でそのタグ名で表され、その要素タイプの最初の要素にマッチします、その要素が親の最初の子でない場合であっても。これまでのところ、私たちが調べている子要素はすべてdivsでしたが、私と一緒にいるので、少し後で説明します。

今のところ、その逆も当てはまります。いずれ: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ます。この例ではdiv、最初の子がに変更された後、2番目の子が最初の子になり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一度に一致する子要素は1つだけである可能性がありますが、:first-of-type擬似クラスに一致する子の数は、それが持つ子の型の数と同じ数だけ存在できます。この例では、セレクター.parent > :first-of-type（pseudoを暗黙的に*修飾:first-of-type）は、1つだけでなく2つの要素に一致します。

<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-childandに:last-of-typeも当てはまります。親の中で他の要素がそれに続くことは絶対にないので、any :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）の違いは何ですか？

— ボルトクロック
ソース

4

やっと理解しました。div要素の下に最初のdivが必要な場合は、div：first-of-typeを呼び出します。少しわかりづらかったですが、わかりました。これは非常に有益で優れた投稿です。よろしくお願いいたします。

1

この回答に基づいてサンプルを作成しました：codepen.io/bigtinabang/pen/pmMPxO

— Tina Chen

14

ここfirst-childとの違いを示す例を作成しましたfirst-of-type。

HTML

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

CSS

.parent :first-child {
  color: red;
}

.parent :first-of-type {
  background: yellow;
}

.parent p:first-child {
  text-decoration: line-through;
}

// Does not work
.parent div:first-child {
  font-size: 20px;
}
// Use this instead
.parent div:first-of-type {
  text-decoration: underline;
}
// This is second child regardless of its type
.parent div:nth-child(2) {
  border: 1px black solid;
}

完全な例を確認するには、https：//jsfiddle.net/bwLvyf3k/1/にアクセスしてください。

— 2回転
ソース

0

first-child-typeとfirst-childの違いは、例で理解できます。私が作成した次の例を理解する必要があります。これは実際に機能し、エディターにコードを貼り付けると、それらがどのように、どのように機能するかを理解できます。彼らが働きます

最初のタイプのコード＃1：

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-of-type{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

結果

.p1、.p2、.p3はスタイル設定され、その色は赤になります。2番目のdivの後に.p1を配置しても、赤になります。

最初の子のコード＃2：

<!DOCTYPE html>
<html>
<head>
<title>clear everything</title>
<style>
p:first-child{
color:red;
}
</style>
<head>
<body>
<p class="p1">some text</p>
<div>
<p class="p2">some text</p>
<div>
<p class="p3">some text</p>
</div>
<p class="p4">some text</p>
</div>
<p class="p5">some text</p>
</body>
</html>

結果：

2番目のdiv 2の後に.p2を置くと、赤くなりませんが、最初の場合は機能していました。

— すべてをクリア
ソース