：first-child（CSSセレクター）

説明

この擬似クラスは、親要素の最初の子要素である場合にのみ、要素と一致します。たとえば、Li：First-Childは、OLまたはUL要素の最初のリスト項目と一致します。リスト項目の最初の子供とは一致しません。 たとえば、上記のCSSセレクターを取り上げましょう。

li:first-child {
  ⋮ <span>declarations
</span>}

次のマークアップに適用しましょう。

<ul>
  <li>This item matches the selector li:first-child.</li>
  <li>This item does not match that selector.</li>
  <li>Neither does this one.</li>
</ul>

最初のリストアイテム要素のみが一致します。 この擬似クラスは要素にのみ適用されることに注意してください。テキスト用に生成された匿名のボックスには適用されません。

例

この例セレクターは、と一致します OLまたはULの最初のリスト項目 要素：

li:first-child {
  ⋮ <span>declarations
</span>}

CSSに関するよくある質問（FAQ）：First-Child Selector

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

：CSSのファーストチャイルドセレクターは、親の最初の子要素をターゲットにします。要素のタイプを考慮していません。たとえば、div要素が続いて親要素内にp要素が続く場合、First-childは親の最初の子であるため、div要素をターゲットにします。したがって、PELEMENTの最初のタイプのタイプを使用する場合、親の最初の子であるかどうかに関係なく、最初のP要素をターゲットにします。たとえば、特定のクラスの最初の子を選択する場合は、構文「.classname：first-child」を使用できます。これにより、クラス「className」の最初の子要素が選択されます。

ファーストチャイルドセレクターと他のセレクターを組み合わせることができますか？たとえば、クラスセレクターで使用して特定のクラスの最初の子をターゲットにしたり、特定のタイプの要素の最初の子をターゲットにして要素セレクターを使用したりできます。

ファーストチャイルドセレクターにはブラウザの互換性の問題がありますか？ただし、Internet Explorer 8以前のバージョンではサポートされていません。

：First-Child Selectorを使用してテキストノードをターゲットにすることはできますか？要素ノードのみをターゲットにできます。テキストノードをスタイリングしたい場合は、それらを要素に包み、その要素をターゲットにする必要があります。

以上が：first-child（CSSセレクター）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。