Story/html/css
css Seletor 에서 > 꺽쇠의 의미
Stdio
2015. 5. 6. 10:33
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
Child selectors
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