"CSS 후손 셀렉터"의 두 판 사이의 차이

2017년 6월 27일 (화) 01:34 기준 최신판

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 같이 보기[ | ]

4 참고[ | ]

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

@@ 1번째 줄: / 1번째 줄: @@
 ==개요==
 ;CSS descendant selector
-;CSS 하위 셀렉터, 하위 선택자
+;CSS 하위 셀렉터, 하위 선택자, 후손 선택자
-*HTML 태그의 하위에 있는 태그를 선택
+*[[CSS 컴비네이터]] 중 하나
+*HTML 태그의 하위에 있는 모든 태그를 선택
+*[[자식 셀렉터]]와는 달리 모든 후손(자식의 자식…)에 적용됨
+*선택자 2개를 띄어쓰면 전자가 상위선택자, 후자가 하위선택자
+<source lang='css'>
+상위선택자 선택자 { 속성: 값; }
+상위선택자 .클래스 { 속성: 값; }
+상위선택자 #아이디 { 속성: 값; }
+</source>
 ==예시==
+*http://zetawiki.com/ex/css/descendant1.php
 <source lang='html5'>
 <style type='text/css'>
 ul li { color: red; }
 </style>
 <ul>
-   <li>ul 항목 1</li>
+   <li>ul 항목 #1 (빨강)</li>
    <li>
      <ol>
-       <li>ol 항목 1</li>
+       <li>ol 항목 #1 (빨강)</li>
-       <li>ol 항목 2</li>
+       <li>ol 항목 #2 (빨강)</li>
      </ol>
    </li>
+  <li>ul 항목 #3 (빨강)</li>
 </ul>
+<ol>
+  <li>ol 항목 #1</li>
+  <li>ol 항목 #2</li>
+</ol>
 </source>
+:→ ul 태그 내부의 모든 li 태그에 빨간색이 적용된다.
+==같이 보기==
+*[[CSS 자식 셀렉터]]
+*[[CSS 아이디 셀렉터]]
+*[[CSS 컴비네이터]]
+*[[CSS 셀렉터]]
+*[[후손]]
-==참고 자료==
+==참고==
 *http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
-[[분류: CSS]]
+[[분류: CSS 셀렉터]]