:first-child 擬似クラス セレクターを使用して、最初の子要素の CSS スタイルを選択します。

Use:first-child pseudo-class selector を使用して、最初の子要素の CSS スタイルを選択します

CSS の疑似クラス セレクターは強力なツールです。要素を選択して変更できます。このうち、:first-child 擬似クラス セレクターはよく使われるセレクターで、子要素の型や位置に関係なく、要素の最初の子要素を選択できます。この記事では、:first-child 疑似クラス セレクターの使用方法を詳しく説明し、具体的なコード例をいくつか示します。

まず、簡単な HTML コードの例を見てみましょう:

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

この例では、3 つのリスト項目 (li) 、それぞれリンゴ、バナナ、オレンジを含む順序なしリスト (ul) があります。 。ここで、最初のリスト項目 (つまり Apple) のテキストの色を赤に設定したいとします。この効果を実現するには、:first-child 疑似クラス セレクターを使用できます。

以下は具体的な CSS コードの例です:

ul li:first-child {
  color: red;
}

このコードでは、:first-child 擬似クラス セレクターを使用して、ul 要素の下にある最初の li 要素を選択します。次に、選択した要素のテキストの色を赤に設定します。

この CSS コードを例に適用すると、最初のリスト項目 (リンゴ) のフォントの色が赤になり、他の 2 つのリスト項目 (バナナとオレンジ) はデフォルトの色のままになります。 。

また、複数のネストされた要素を含む、より複雑な HTML の例を次に示します。

<div class="container">
  <h1>Hello, world!</h1>
  <p>Welcome to my website.</p>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</div>

最初のリスト項目を選択し、そのテキストの色を赤に設定する場合は、それを少し変更する必要があります。ここで、:first-child 疑似クラス セレクターを使用して ul 要素の最初の子要素を選択し、そのテキストの色を赤に設定する必要があります。具体的な CSS コードは次のとおりです。

.container ul li:first-child {
  color: red;
}

このコードでは、まず .container クラスの下の ul 要素を選択し、次に :first-child 擬似クラス セレクターを使用して、最初の li 要素を選択します。 ul要素。最後に、選択した要素のテキストの色を赤に設定します。

要約すると、:first-child 擬似クラス セレクターを使用すると、要素の最初の子要素を簡単に選択し、それに特定の CSS スタイルを適用できます。単純な要素であっても、複雑な入れ子構造であっても、このセレクターは目的の効果を達成するのに役立ちます。この記事で提供されているコード例がお役に立てば幸いです。

以上が:first-child 擬似クラス セレクターを使用して、最初の子要素の CSS スタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。