개요
- CSS descendant selector
- CSS 하위 셀렉터, 하위 선택자, 후손 선택자
- CSS 컴비네이터 중 하나
- HTML 태그의 하위에 있는 모든 태그를 선택
- 자식 셀렉터와는 달리 모든 후손(자식의 자식…)에 적용됨
- 선택자 2개를 띄어쓰면 전자가 상위선택자, 후자가 하위선택자
상위선택자 선택자 { 속성: 값; }
상위선택자 .클래스 { 속성: 값; }
상위선택자 #아이디 { 속성: 값; }
예시
<style type='text/css'>
ul li { color: red; }
</style>
<ul>
<li>ul 항목 #1 (빨강)</li>
<li>
<ol>
<li>ol 항목 #1 (빨강)</li>
<li>ol 항목 #2 (빨강)</li>
</ol>
</li>
<li>ul 항목 #3 (빨강)</li>
</ul>
<ol>
<li>ol 항목 #1</li>
<li>ol 항목 #2</li>
</ol>
- → ul 태그 내부의 모든 li 태그에 빨간색이 적용된다.