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

Question

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

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

알려주세요 !!

#notice>table

#notice tr>td, #notice tr>th

#notice tr>td

#notice tr:hover>td

#notice tr>td:first-child

HappyDad · Accepted Answer

TH1
TH2
TD1
TD2

자식 선택자(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

안녕하세요.CSS에서 ">" 기호는 바로 아래 자식 (child) 관계를 나타냅니다.#notice>table 1. id가 notice인 element 바로 하위의 table 태그 선택

2. id가 notice인 element 바로 하위의 table 태그가 없으므로 선택 안됨

#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를 선택

생활꿀팁

생활꿀팁

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