ホームページ >ウェブフロントエンド >CSSチュートリアル >:first-child と :first-of-type: 各 CSS 疑似クラスはいつ使用する必要がありますか?

:first-child と :first-of-type: 各 CSS 疑似クラスはいつ使用する必要がありますか?

:first-child vs. :first-of-type: When Should I Use Each CSS Pseudo-class?

:first-child と :first-of-type による要素選択

CSS では、疑似クラス :first-childと :first-of-type は両方とも、親要素内の位置に基づいて要素を選択します。ただし、「first」の定義方法が異なります。

Element:first-child

:first-child は、指定された親の最初の子要素を選択します。その要素タイプの。提供された例では:

div:first-child

このセレクターはすべての

に一致します。親要素の最初の子である要素。親要素に他の要素タイプが含まれている場合、それらは選択されません。

Element:first-of-type

:first-of-type は最初の要素を選択します親内の特定の要素タイプのインスタンス。最初の

と一致します。全体の最初の子ではない場合でも、要素。例:

div:first-of-type

提供された HTML:

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

:first-of-type は

を選択します。

の最初のインスタンスとしてクラス "parent" を使用します。

要素はID が「first」の場合、

主な違い

要素の階層: :first-child は子の順序に基づいて一致しますが、:first-of-要素タイプとそのタイプ内の位置に基づいてタイプが一致します。
数一致: :first-child は親ごとに 1 つの要素のみと一致しますが、:first-of-type は同じタイプの複数の要素と一致します。
特異性: :first- of-type は一般に :first-child よりも高い特異性を持ち、CSS で優先されることを意味します。 rules.

使用例

:first-child を使用して選択します:

:first-of-type を使用して選択します:

以上が:first-child と :first-of-type: 各 CSS 疑似クラスはいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

続きを見る