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

자손 선택자(Descendant combinator, 띄어쓰기 공백)는
앞에서 지정한 요소의 타깃 자손 요소를 모두 선택합니다.

선택자A 선택자B 형태의 선택자로,
두 개의 복합 선택자를 구분하는 띄어쓰기(" ", 공백)가 있으며 선택자A 요소 안에 위치한 타깃 자손 요소인 선택자B를 모두 선택합니다.
(자손이란 자식, 자식의 자식, 자식의 자식의 자식... 등 모든 자손을 의미합니다.)

구문

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

예제 -1

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>
브라우저에서 실제 표시된 모습

예제 -2

CSS 
li {
    list-style-type: disc;
}
li li {
    list-style-type: circle;
    color: red;
}
HTML 
<ul>
    <li>
        <div>아이템 li</div>
        <ul>
            <li>서브아이템 li li</li>
            <li>서브아이템 li li</li>
        </ul>
    </li>
    <li>
        <div>아이템 li</div>
        <ul>
            <li>서브아이템 li li</li>
            <li>서브아이템 li li</li>
        </ul>
    </li>
</ul>
브라우저에서 실제 표시된 모습

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

앞에서 지정한 요소의 자식 요소만를 모두 선택하려면 자식 선택자(Child combinator combinator, >)를 사용하세요.
(자식이란 직계 자식만을 의미합니다. 자식의 자식, 자식의 자식의 자식.. 등의 자손을 의미하지 않습니다.)

구문

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

예제

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>
브라우저에서 실제 표시된 모습

브라우저 호환성

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

명세서

자손 선택자의 명세서 사양
명세서 사양
선택자A 선택자B Selectors Level 4
#descendant-combinators

참고문헌

같이 보기