CSS - Selector - Child, Descendant, Sibling Combinator

개요

div를 기준으로

div는 부모 요소, div 바로 아래에 속한 h1, ul은 div의 자식요소, 그리고 ul에 속한 li, h1, p등은 자손 요소가 된다.

<div>
	<h1>
        News
	</h1>
	<ul>
		<li>
        	<h1>
            	hello
            </h1>
            <p>
            	bla bla
            </p>
        </li>
        <li>
        </li>
    </ul>
</div>

 

자식 선택자

parent > child

 

자손 선택자

parent descendants - 공백을 사용. 자손 요소에는 자식 요소도 포함된다.

 

형제 선택자

parent + sibling - parent 다음에 오는 하나의 sibling 요소만 선택

 

parent ~ sibling - parent 다음에 오는 모든 sibling 요소들을 선택