티스토리 뷰
http://sqlplus.tistory.com/entry/css-Seletor-%EC%97%90%EC%84%9C-%EA%BA%BD%EC%87%A0%EC%9D%98-%EC%9D%98%EB%AF%B8
body > #content
body > #content 는 body element 의 바로 하위의 #content 만 선택이 됩니다. child selector 라고 합니다.
<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 만 쓸 경우 첫번째 뎁스만 선택이 됩니다.
'Language > CSS' 카테고리의 다른 글
| [ CSS ] 텍스트 정렬 :: 왼쪽 오른쪽 가운데 양쪽 (0) | 2021.01.13 |
|---|---|
| [ CSS ] 선택자 : first-child / last-child / nth-child / nth-last-child / nth-last-child // div, ul, li 위치 순서 (0) | 2017.04.06 |
| [ CSS ] background 배경 (0) | 2016.01.14 |
| [ CSS ] white-Space, word-break, word-wrap, text-overflow (0) | 2016.01.03 |
| [ CSS ] opacity 와 background-color:rgba 차이점 (0) | 2016.01.02 |