body>#content
body>#content 는 body element 의 바로 하위의 #content만 선택이 됩니다. child selector 라고 합니다.
http://www.w3.org/TR/REC-CSS2/selector. … -selectors
<body>
<div id="content">
<p>child selector</p>
</div>
</body>와 같은 경우를 선택할때 사용이 됩니다.
<body>
<div id="wrapper">
<div id="content">
</div>
</div>
</body>와 같은 경우는 선택이 안되지요.
반면 body #content 의 경우는 Descendant selectors 인데 body 의 하위에 #content 가 어느 뎁스에 있어도 선택이 됩니다.
<ul id="child">
<li>첫번째 뎁스
<ul>
<li>두번쨰 뎁스</li>
</ul>
</li>
</ul>와 같은 코드가 있을때,
#child li 를 쓰면 첫번째와 두번째 뎁스의 li 가 다 선택되지만, #child>li 만 쓸 경우첫번째 뎁스만 선택이 됩니다.
출처 : http://cssdesign.kr/forum/viewtopic.php?id=238
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children of BODY:
BODY > P { line-height: 1.3 }
Example(s):
The following example combines descendant selectors and child selectors:
DIV OL>LI P
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional whitespace around the ">" combinator has been left out.
For information on selecting the first child of an element, please see the section on the :first-child pseudo-class below.
참고 : http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors
'Story > html/css' 카테고리의 다른 글
| YouTube 내장 플레이어 및 플레이어 매개변수 (0) | 2015.07.10 |
|---|---|
| F12 개발자 도구의 콘솔 오류 메시지 (0) | 2015.06.29 |
| HTML5 table align (0) | 2015.04.02 |
| 소셜 공유버튼 쉽게 달기 (0) | 2015.04.02 |
| The big web design trends for 2015 (0) | 2015.03.31 |
