[CSS] 자손 선택자, 후손 선택자

선택자 종류중 자손과 후손 선택자가 있다.

자손 선택자의 선택자 형태는 "선택자A > 선택자 B" 처럼 쓰며, 선택자 A의 자손에 위치하는 선택자 B를 선택한다.

후손 선택자의 선택자 형태는 "선택자A 선택자 B" 처럼 쓰며, 선택자 A의 후손에 위치하는 선택자 B를 선택한다.

예를들어 다음과 같이 html 이 작성되 있을 경우

<div class="container">
    <h1> TITLE </h1>
    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
    </ul>
</div>

이때 div 의

자손 선택자는 h1, ul 이며

후손 선택자는 li 들을 말한다.

따라서 h1을 선택할때

.container > h1 { 스타일 }

라고 쓰며

li를 선택할 때는

.container li { 스타일 }

라고 쓰면 선택할수 있다.