연결 선택자 - 하위, 자식, 인접 형제, 형제 선택자

• 하위 선택자(descendent selector) - 지정한 모든 하위 요소에 스타일 적용
• 하위 선택자는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것.
• 자식 선택자라고도 함. 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용됨.
• 하위 선택자 정의 : 상위 요소와 하위 요소를 공백으로 구분하고 대괄호 안에 속성을 지정함.
• 예제 - http://robbi.pe.kr/descendant.html

• 자식 선택자(child selector) - 자식 요소에만 스타일 적용
• 하위 요소 전체에 스타일을 적용하는 것이 아니라 자식 요소에만 스타일을 적용.
• 두 요소 사이에 '> (부등호)'를 표시해 부모 요소와 자식요소를 구분함. (손자 요소는 제외)
• 예제 - http://robbi.pe.kr/child.html

• 인접 형제 선택자(adjacent selector) - 가장 가까운 형제 요소에 스타일 적용
• 태그들이 포함 관계를 가질 때 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 하듯이 같은 부모 요소를 가지는 요소들을 형제 관계라고 부름.
• 형제 요소들에서 먼저 나오는 요소를 '형 요소', 나중에 나오는 요소를 '동생 요소' 라고 함.
• 인접 형제 선택자는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용됨.
• 인제 형제 선택자 정의 : 요소 1과 요소 2 사이에 '+ (더하기)'를 표시함.
• 요소 1과 요소 2는 같은 레벨이면서 요소 1 이후 맨 먼저 오는 요소 2에 스타일 적용.
• 예제 - http://robbi.pe.kr/child-adjacent.html

• 형제 선택자(sibling selector) - 형제 요소에 스타일 적용
• 인접 형제 선택자와 달리 모든 형제 요소에 적용됨.
• 형제 선택자 정의 : 첫 번째 요소와 두 번째 요소 사이에 '~ (틸드)'를 표시함.
• 예제 - http://robbi.pe.kr/child-sibiling.html