조합자

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 {...}