자손 셀렉터

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

첫 번째 선택자는 하위 선택자입니다. 이것은 요소가 다른 요소 내부에 깊게 중첩되어 있더라도, 그 안에 있는 요소의 스타일을 지정하고 싶을 때 사용합니다. 예를 들어, 컨테이너 안에 두 개의 단락이 있습니다.

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

이제 하위 선택자(descendant selector)를 사용하여 div 안에 있는 모든 단락의 스타일을 지정해 보겠습니다:

.container p {
    color: blue;
}

.container div 내부의 모든 단락은 파란색으로 변합니다 — 심지어 section 요소 내부에 중첩된 단락도 마찬가지입니다.

실력 점검

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

실력 점검

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

챌린지

쉬움

"navigation" 클래스를 가진 요소의 하위 요소인 모든 리스트 아이템(<li>)을 선택하여 텍스트 색상을 purple로 변경하는 CSS 규칙을 만드세요.

치트 시트

하위 선택자(descendant selector)는 다른 요소 안에 있는 요소를 스타일링하며, 깊게 중첩되어 있더라도 적용됩니다.

구문: 부모 선택자와 하위 선택자 사이에 공백을 사용합니다:

.container p {
    color: blue;
}

이것은 중첩 수준에 관계없이 container 클래스를 가진 요소 내부에 있는 모든 <p> 요소를 선택합니다.

직접 해보기

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>

실력 점검

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