자식, 자손, 형제 선택자

자식 선택자(child combinator)
: parent > child

자손 선택자(descendant combinator)
:parent descendants (중간 공백)

형제 선택자 (sibling combinators)
: parent + sibling / parent ~ sibling

자식과 자손 구분:

직접 감싸고 있으면 자식 선택자, 그렇지 않지만 어쨌든 감싸고 있으면 자손 선택자
계층이 같다면 형제!
자식은 곧 자손이기도 하다는점~
.
.

section > h1 {
	color: ~;
}

">"는 section의 자식 h1만 선택되어 적용됨

section h1 {
	color: ~;
}

"공백"이라면 section의 자손(자식 포함)h1들이 다 선택 되는것.

형제 선택자 구분:

.active ~ li{
	color: ~;
}

"~"을 사용했다면, class가 active인 요소 다음에 오는 형제 요소들이 적용된다!
(active 클래스의 요소를 포함하여 그 위에 작성된 형제요소들은 적용되지 않는것임)

.active + li {
	color: ~;
}

"+"를 사용했다면, class가 active인 요소 바로 다음에 오는 형제요소 하나가 적용된다!
.
.
.

사실 이 형제 선택자들은 자주 쓰이진 않는다지만(나도 이걸 굳이 써야하나 싶었다) 가끔 쓰일때도 있다고 하니까 알아두자 ~