부모자식 관계를 전혀모르겠습니다.

Question

css파트를 공부하고 있는 중인데

아래같은 경우 > 가 의미 하는 것과 어떤걸 나타내는지 전혀 모르겠습니다.

알려주세요 !!

#notice>table

#notice tr>td, #notice tr>th

#notice tr>td

#notice tr:hover>td

#notice tr>td:first-child

Answer 1

<div id='notice'> <table> <thead> <tr><th>TH1</th></tr> <tr><th>TH2</th></tr> </thead> <tbody> <tr><td>TD1</td></tr> <tr><td>TD2</td></tr> </tbody> </table> </div>

자식 선택자(child selector)는 선택한 요소의 직계 자식만 선택하는 선택자입니다.

직계 자식의 자식(후손)은 포함하지 않습니다.

위 소스 코드를 예로 들면,

#notice의 직계 자식은 table 하나 입니다.

#notice를 기준으로 thead, tbody, tr, th, td 는 모두 '자손' 입니다.

table의 직계 자식은 thead, tbody 입니다.

thead의 직계 자식은 tr 입니다.

그 밖에 다른 요소들도 같은 맥락으로 생각하시면 됩니다.

#notice>table

=> #notice의 직계 자식 중 table 요소 선택

#notice tr>td, #notice tr>th

=> #notice의 자손 중 tr의 직계 자식 td 선택, #notice의 자손 중 tr의 직계 자식 th 선택

#notice tr>td

=> #notice의 자손 중 tr의 직계 자식 td 선택

#notice tr:hover>td

=> #notice의 자손 중 마우스 오버된 tr의 직계 자식 td 선택

#notice tr>td:first-child

=> #notice의 자손 중 tr의 직계 자식 td 중에 첫 번 째 td 선택

Answer 2

안녕하세요.

CSS에서 ">" 기호는 바로 아래 자식 (child) 관계를 나타냅니다.

#notice>table 1. id가 notice인 element 바로 하위의 table 태그 선택 <div id="notice"> <table> </table> </div> 2. id가 notice인 element 바로 하위의 table 태그가 없으므로 선택 안됨 <div id="notice"> <div> <table> </table> </div> </div> #notice table 위처럼 > 기호가 아닌 띄어쓰기로 되어 있다면 id가 notice인 element의 하위 table 태그를 모두 선택하기 때문에 위 1, 2번의 table이 모두 정상 선택됨

#notice>table : id가 notice인 element 바로 하위에 table이 선택됨

#notice tr>td, #notice tr>th : id가 notice인 element의 하위에서 tr 태그 중 바로 하위에 td 또는 th 태그를 가지고 있는 element가 선택됨

#notice tr>td : 바로 위에 설명과 비슷

#notice tr:hover>td : id가 notice인 element 하위에서 tr에 마우스가 over 됐을 때 바로 하위의 td 태그 선택

#notice tr>td:first-child : id가 notice인 element 하위에서 tr 태그 중 바로 하위의 첫번째 td를 선택