"CSS 자식 셀렉터"의 두 판 사이의 차이

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

1 개요[ | ]

부모선택자>자식선택자 { 속성: 값; }

2 예시[ | ]

<style type='text/css'>
div > span { color: red; }
</style>

<div>
<span>안녕</span>
<p><span>친구들</span></p>
</div>

→ div의 직접적인 자식인 span "안녕"만 빨간색이 됨

3 같이 보기[ | ]

4 주석[ | ]

5 참고[ | ]

@@ 2번째 줄: / 2번째 줄: @@
 ;CSS child selector
 ;CSS 자식 셀렉터
-*직접적인 자식에 적용됨
+*[[CSS 컴비네이터]] 중 하나
-*[[하위 셀렉터]]와는 차이가 있음
+*직접적인 자식에만 적용됨
-:하위 셀렉터의 경우, 직접적인 자식뿐만 아니라 후손 전체<ref>즉, 자식의 자식…, 하위 모든 태그</ref>에 적용됨
+*후손 전체<ref>즉, 자식의 자식…, 하위 모든 태그</ref>에 적용되는 [[후손 셀렉터]]와는 차이가 있음
+* > 기호로 표시함
+<source lang='css'>
+부모선택자>자식선택자 { 속성: 값; }
+</source>
 ==예시==
-*http://jmnote.com/css/child-selector.php
 <source lang='html5'>
 <style type='text/css'>
-div > span { color: violet; }
+div > span { color: red; }
 </style>
@@ 18번째 줄: / 21번째 줄: @@
 </div>
 </source>
+:→ div의 직접적인 자식인 span "안녕"만 빨간색이 됨
+:→ 예제: http://zetawiki.com/ex/css/child-selector.php
 ==같이 보기==
+*[[CSS nth-child 셀렉터]]
 *[[CSS 하위 셀렉터]]
+*[[CSS 셀렉터]]
 ==주석==
 <references/>
-==참고 자료==
+==참고==
 *http://www.w3.org/TR/CSS2/selector.html#child-selectors
 [[분류: CSS 셀렉터]]