combinators

combinators는 선택자들 사이의 관계를 설명

CSS 선택자는 하나 이상의 단순 셀렉터를 포함 할 수 있다. 

셀렉터 사이에 combinators를 포함해서 연결할 수 있다.

 

 

• 자손 선택자(descendant selector) : space
• 자식 선택자(child selector) : >
• 인접 형제 선택자(adjacent sibling selector) : +
• 일반 형제 선택자(general sibling selector) : ~

자손 선택자 : space

지정된 요소의 자손인 모든 요소와 일치, space bar로 조상과 자손간 공간을 주고 입력

p span { color : wheat; }

p태그 안에 자손인 span에 다른색상 주기

 

자식 선택자 : >

자식 선택은 지정된 요소의 직접적인 모든 자식 요소를 선택함

div > span {text-decoration:underline;}

div태그 안에 span 자손들중 자식요소인 span만 밑줄 긋기

인접 형제 선택자 : +

인접 형제 선택은 지정된 요소의 인접 형제인 모든 요소를 선택

형제요소는 같은 부모 요소를 가져야 하며, adjacent는 immediately following을 의미

P + span { text-decoration: underline; }

p태그의 형제요소인 span태그에만 밑줄 긋기

일반 형제 선택자 : ~

일반 형제 선택은 지정된 요소의 형제인 모든 요소를 선택

p ~ span {text-decoration: underline;}

p태그의 모든 형제 span태그에 밑줄 긋기