CSS3 선택자 - 연결 선택자

하위 선택자 - 상위요소에 있는 하위 요소에 css를 적용한다. 상위요소와 하위요소는 공백으로 구분한다.

section p { color: blue; }

 

자식 선택자 - 부모 요소안에 포함된 자식 요소중 해당 요소에만 css를 적용한다. 부모 요소와 자식요소는 >로 구분한다.

section > p { clolr: blue; }

 

인접 형제 선택자 - 부모요소를 가지는 요소들을 형제요소라고 하는데, 먼저 오는 요소를 '형 요소' 다음에 오는 요소를 '동생 요소'라고 한다. 인접 형제 선택자는 첫 번째 동생요소에만 스타일을 적용한다.

h1 + p { text-decoration: underline; }

 

형제 선택자 - 인접 형제 선택자와 달리 모든 형제 요소에 적용한다. 요소 사이에 '~'로 구분한다.

h1 ~ p { text-decoration: underline; }