자손 결합자 ' ' (descendant combinater)

자손 결합자(" ")는 특정 요소의 자손을 선택할 때 활용하는 결합자이다.
자손은 자식, 자손, 그 이후의 후손 모두를 포함한다.

ex) .a h1
태그 사이에 띄어쓰기" ", 자손 결합자를 주어 'a 클래스 안의 h1라는 자손을 가리킨다.

이렇게 자손 결합자를 활용한 선택자는 자손 선택자가 된다.

• 헷갈리는 자손 선택자 사용
  밑의 두 선택자는 같아보이지만 분명히 다른 역할을 한다.

1) .a :not(p) {color : green;}
2) .a:not(p) {color : green;}

1) a class 안에 들어있는 p tag가 아닌 요소들의 color를 green으로 변경
2) p tag가 아닌 a class의 color를 green으로 변경

띄어쓰기 유무에 주의하여 올바르게 선택자를 사용하자!

자식 결합자

자식 결합자(">")는 특정 요소의 자손 중 직계 자식만 선택할 때 활용하는 결합자이다.

ex) .a > h1
태그 사이에 ">", 자식 결합자를 주어 a 클래스 안의 자손들 중 'h1라는 직계 자식'을 가리킨다.