조합자


CSS Level
CSS 1, CSS 2, CSS 3

하위 조합자 (Descendant combinator)

먼저 지정한 선택자가 뒤에 오는 선택자의 조상인 경우에 해당하는 자손 요소들을 선택합니다. 각각의 선택자를 공백으로 구분합니다.
h1 em {...}

p.intro a {...}
p .intro a {...}
주의: 위의 두 선택자는 서로 그 의미가 다릅니다.

자식 조합자 (Child combinator)

먼저 지정한 선택자의 자식 요소가 뒤에 오는 선택자인 경우에 해당하는 자식 요소들을 선택합니다. 각각의 선택자를 부등호 (>)으로 구분합니다. CSS 2.
body > p {...}
div ol>li p {...}

인접 형제 조합자 (Adjacent sibling combinator)

더하기(+) 기호로 이어진 두 개의 선택자에 해당하는 요소가 서로 부모 요소가 같은 형제 요소이며, 첫 번째 요소의 바로 뒤에 이어지는 두 번째 요소들을 선택합니다. CSS 2.
h1.opener + h2 {...}

일반 형제 조합자 (General sibling combinator)

물결(~) 기호로 구분된 두 선택자에 해당되는 요소가 서로 부모가 동일한 형제 요소이며, 첫 번째 요소의 뒤에 이어지는 두 번째 요소들을 선택합니다. 인접 형제 조합자와는 달리 바로 뒤에 이어질 필요가 없습니다. CSS 3.
h1 ~ pre {...}

알립니다!

사이드바의 프로퍼티 목록 중 뒤에 별표(*)가 붙은 것은 CSS 3의 내용이 반영되지 않은 것입니다.

읽으신 글에 수정할 내용, 추가할 내용 등이 있다면 부담없이 댓글을 남겨 주세요.