最初の要素を選択する

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 13/43。

:first-child 擬似クラスは、兄弟要素のグループの中で最初の要素をターゲットにします。

例えば：

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

親要素の最初の子要素であるすべての段落は、文字色が青になり、太字になります。

p:first-child {
  color: blue;
  font-weight: bold;
}

子孫セレクタ、子セレクタ、その他のセレクタを組み合わせて適用することで、要素をより具体的に指定できます。別の例を次に示します：

div:first-child h1 {
 color: red;
}

これは、兄弟要素の中で最初の div 要素を選択し、その中にある <h1> タグのテキストの色を赤に変更します。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

任意の順序なしリスト (<ul>) 内の最初のリスト項目 (<li>) をターゲットにし、以下のスタイルを適用するCSSルールを作成してください：

テキストの色を "blue"
背景色を "lightyellow"
左側のパディングを "10px"

チートシート

:first-child 擬似クラスは、兄弟要素のグループの中で最初の要素をターゲットにします。

p:first-child {
  color: blue;
  font-weight: bold;
}

:first-child を他のセレクターと組み合わせて、より具体的なターゲットを指定することができます：

div:first-child h1 {
  color: red;
}

これは、兄弟要素の中で最初の div 要素を選択し、その中にある h1 タグをターゲットにします。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。