子セレクター

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

子セレクタ ( > ) は、別の要素の直接の子要素である要素にスタイルを適用したい場合に使用されます。子孫セレクタとは異なり、直接の子要素のみを選択し、それより深い階層の要素は選択しません。

例えば：

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

直下の子要素にのみスタイルを適用します:

.parent > p {
  color: red;
}

このCSSを適用すると、最初の段落「This is a direct child」だけが赤くなります。2番目の段落は、クラス「parent」を持つdivの直接の子ではないため、影響を受けません。

腕試し

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

腕試し

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

チャレンジ

簡単

複数のチームセクションを保持する .team-container があります。あなたのタスクは以下の通りです：

子セレクタを使用して、.team-container の直下にある子要素の div に対して、背景色を "lightblue"、パディングを "10px"、マージンを "5px" にスタイリングしてください。
子セレクタを使用して、.team クラスを持つ div の直下にある <h3> 要素に対して、色を "green"、フォントサイズを "20px" にスタイリングしてください。

チートシート

子セレクタ (>) は、要素の直下の子要素のみを選択し、それより深い子孫要素は選択しません。

構文:

parent > child {
  /* スタイル */
}

例:

<div class="parent">
  <p>Direct child - will be styled</p>
  <section>
    <p>Grandchild - won't be styled</p>
  </section>
</div>

.parent > p {
  color: red;
}

最初の段落だけが赤くなります。なぜなら、それが .parent の直下の子要素だからです。

自分で試してみよう

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>

腕試し

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