CSS 후손 셀렉터

1 개요

CSS descendant selector

CSS 하위 셀렉터, 하위 선택자, 후손 선택자

• CSS 컴비네이터 중 하나
• HTML 태그의 하위에 있는 모든 태그를 선택
• 자식 셀렉터와는 달리 모든 후손(자식의 자식…)에 적용됨
• 선택자 2개를 띄어쓰면 전자가 상위선택자, 후자가 하위선택자

상위선택자 선택자 { 속성: 값; }
상위선택자 .클래스 { 속성: 값; }
상위선택자 #아이디 { 속성: 값; }

2 예시

• http://zetawiki.com/ex/css/descendant1.php

<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 태그에 빨간색이 적용된다.

3 같이 보기

• CSS 자식 셀렉터
• CSS 아이디 셀렉터
• CSS 컴비네이터
• CSS 셀렉터
• 후손

4 참고

• http://www.w3.org/TR/CSS2/selector.html#descendant-selectors