자식 셀렉터

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 3번째.

자식 선택자 ( > )는 특정 요소의 직계 자식인 요소에 스타일을 적용하고 싶을 때 사용됩니다. 하위 선택자와 달리, 더 깊은 단계의 요소가 아닌 오직 직계 자식만을 선택합니다.

예를 들어:

<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"만 빨간색이 됩니다. 두 번째 단락은 "parent" 클래스를 가진 div의 직계 자식이 아니므로 영향을 받지 않습니다.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

여러 개의 팀 섹션을 포함하는 .team-container가 있습니다. 여러분의 과제는 다음과 같습니다:

자식 선택자(child selector)를 사용하여 .team-container 내부의 직계 자식 div들에 lightblue 배경색, 10px의 패딩, 그리고 5px의 마진을 스타일링하세요.
자식 선택자를 사용하여 .team div 내부의 직계 <h3> 요소들에 green 색상과 20px의 글자 크기를 스타일링하세요.

치트 시트

자식 선택자 (>)는 요소의 직계 자식만 선택하며, 더 깊은 하위 요소(후손)는 선택하지 않습니다.

구문:

parent > child {
  /* styles */
}

예시:

<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>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.