CSS 자식 요소 선택자

자식 선택자(Child selectors)는 특정 요소의 자식 요소로만 선택할 수 있습니다.

자식 선택자 선택

모든 자손 요소를 선택하지 않고, 특정 요소의 자식 요소만 선택하고 싶다면, 자식 선택자(Child selector)를 사용하세요.

예를 들어, h1 요소의 자식 요소로만 strong 요소를 선택하고 싶다면 다음과 같이 작성할 수 있습니다：

h1 > strong {color:red;}

이 규칙은 첫 번째 h1 아래의 두 개의 strong 요소를 빨간색으로 변환하지만, 두 번째 h1의 strong은 영향을 받지 않습니다：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

직접 시도해 보세요

문법 설명

자식 선택자는 더 큰 부호(자식 결합자)를 사용했습니다는 점을 주의해야 합니다.

자식 결합자 양쪽에 공백 문자가 있을 수 있으며, 이는 선택 사항입니다. 따라서 다음 작성 방법 모두 가능합니다:

h1 > strong
h1> strong
h1 >strong
h1>strong

선택자 h1 > strong을 오른쪽에서 왼쪽으로 읽으면 'h1 요소의 자식으로 있는 모든 strong 요소를 선택'이라고 설명할 수 있습니다.

자손 선택자와 자식 선택자의 결합

아래의 선택자를 보세요:

table.company td > p

위의 선택자는 table 요소의 자식으로 있는 모든 p 요소를 선택합니다. 이 table 요소는 company 클래스 속성을 가진 table 요소에서 상속됩니다.