자식 선택자 : 선택자A > 선택자B

자식 선택자(Child combinator, >)는
앞에서 지정한 요소의 타깃 자식 요소를 모두 선택합니다.

선택자A > 선택자B 형태의 선택자로,
두 개의 복합 선택자를 구분하는 기호(>)가 있으며 선택자A 요소 안에 위치한 타깃 자식 요소인 선택자B를 모두 선택합니다.
(자식이란 직계 자식만을 의미합니다. 자식의 자식, 자식의 자식의 자식.. 등의 자손을 의미하지 않습니다.)

구문

CSS 
selectorA > selectorB {
    /* ... */
}

예제 -1

CSS 
div > p {
    background-color: yellowgreen;
}
article {
    border: 1px dashed red;
}
HTML 
<h2>자식 선택자</h2>
<p>p 요소입니다.</p>
<div>
    <p>앞에서 지정한 div 요소의 타깃 자식 요소인 p를 모두 선택합니다.</p>
    <p>앞에서 지정한 div 요소의 타깃 자식 요소인 p를 모두 선택합니다.</p>
    <article>
        <h3>article</h3>
        <p>손자 p는 선택하지 않습니다.</p>
    </article>
</div>
브라우저에서 실제 표시된 모습

예제 -2

CSS 
span {
    background-color: aqua;
}
div > span {
    background-color: gold;
}
HTML 
<div>
    <span>
        div의 직계 자식 span입니다.
        <span>div의 손자 span입니다.</span>
    </span>
</div>
<span>div와 상관없는 span입니다.</span>
브라우저에서 실제 표시된 모습

두 개의 복합 선택자를 구분하는 기호(>)의 앞과 뒤의 띄어쓰기는 선택사항이지만 시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다.

CSS 
/* 기호(>) 앞과 뒤의 띄어쓰기는 선택사항이지만
   시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다. */
   
div>span { /* 권장하지 않음 */
    background-color: gold;
}
div > span { /* 권장함 */
    background-color: gold;
}

자손 선택자 : 선택자A 선택자B

직계 자식뿐만 아니라 앞에서 지정한 요소의 타깃 자손 요소를 모두 선택하려면 자손 선택자(Descendant combinator, 띄어쓰기 공백)를 사용하세요.
(자손이란 자식, 자식의 자식, 자식의 자식의 자식... 등 모든 자손을 의미합니다.)

구문

CSS 
selectorA selectorB {
    /* ... */
}

예제

CSS 
div p {
    background-color: yellowgreen;
}
div article {
    border: 1px dashed red;
}
HTML 
<h2>자손 선택자</h2>
<p>p 요소입니다.</p>
<div>
    <p>앞에서 지정한 div 요소의 타깃 자손 요소인 p를 모두 선택합니다.</p>
    <p>앞에서 지정한 div 요소의 타깃 자손 요소인 p를 모두 선택합니다.</p>
    <article>
        <h3>article</h3>
        <p>앞에서 지정한 div 요소의 타깃 자손 요소인 손자 p도 선택합니다.</p>
    </article>
</div>
브라우저에서 실제 표시된 모습

브라우저 호환성

자식 선택자의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
선택자A > 선택자B 1 12 1 1

명세서

자식 선택자의 명세서 사양
명세서 사양
선택자A > 선택자B Selectors Level 4
#child-combinators

참고문헌

같이 보기