CSS セレクター `:first-child` と `:first-of-type` の違いは何ですか?

:first-child と :first-of-type の違いを説明する

一見似た定義にもかかわらず、:first-child と :first-of-type選考基準が大きく異なります。包括的な理解を得るために、それらを区別するニュアンスを調べてみましょう。

First-Child vs. First of Type

:first-child は、親要素内の任意の型の最初の要素を識別します。 。一方、:first-of-type は、親要素内の独自の型の最初の要素を特にターゲットにします。

次の HTML スニペットを考えてみましょう:

<div class="parent">
  <div>Child 1</div>
  <div>Child 2</div>
  <p>Paragraph</p>
</div>

この例では、セレクター '.parent > div:first-child' は、'.parent' 要素の最初の子であるため、テキスト「Child 1」を持つ要素と一致します。一方、セレクター '.parent> は、 div:first-of-type' は、親内の 'div' 型の最初の要素であるため、「Child 1」にも一致します。

区別の意味

:first- child は親要素内の子の順序を優先しますが、 :first-of-type は兄弟間の位置に関係なく、要素の型に焦点を当てます。この区別は、子要素が異なる型に属するシナリオに影響を与える可能性があります。

この例の最初の子が 'h1' 要素に置き換えられた場合でも、:first-child 選択は引き続きそれをターゲットにします。ただし、:first-of-type は最初の 'div' 要素と一致し、型が異なるため実質的に 'h1' をスキップします。

概要

要約すると、:first-child となります。は型に関係なく最初の子を表しますが、:first-of-type は特定の型の最初の要素を特にターゲットにします。この区別により、親要素内の位置とタイプに基づいて HTML 要素を選択する際の柔軟性と精度が向上します。

以上がCSS セレクター `:first-child` と `:first-of-type` の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。