CSS 조합자

CSS 조합자

조합자는 선택자 간의 관계를 설명하는某种机制입니다.

CSS 선택자는 여러 단순 선택자를 포함할 수 있으며, 단순 선택자 사이에는 조합자를 포함할 수 있습니다.

CSS에는 네 가지 다른 조합자가 있습니다:

  • 자손 선택자 (공백)
  • 자식 선택자 (>)
  • 접근 형제 선택자 (+)
  • 일반 형제 선택자 (~)

자손 선택자

자손 선택자는 지정된 요소의 자손 요소에 속하는 모든 요소를 매칭합니다.

아래의 예제는 <div> 요소 내에서 모든 <p> 요소를 선택합니다:

예제

div p {
  background-color: yellow;
}

본인이 직접 시도해 보세요

자식 선택자

자식 선택자는 지정된 요소의 자식 요소에 속하는 모든 요소를 매칭합니다.

아래의 예제는 <div> 요소의 자식 요소에 속하는 모든 <p> 요소를 선택합니다:

예제

div > p {
  background-color: yellow;
}

본인이 직접 시도해 보세요

접근 형제 선택자

접근 형제 선택자는 지정된 요소의 접근 동급 요소를 모두 매칭합니다.

형제 (동급) 요소는 같은 부모 요소를 가져야 하며, '접근'은 '그 뒤에 오는'을 의미합니다.

아래의 예제는 <div> 요소 뒤에 오는 모든 <p> 요소를 선택합니다:

예제

div + p {
  background-color: yellow;
}

본인이 직접 시도해 보세요

일반 형제 선택자

일반 형제 선택자는 지정된 요소의 동급 요소에 속하는 모든 요소를 매칭합니다.

아래의 예제는 <div> 요소의 동급 요소에 속하는 모든 <p> 요소를 선택합니다:

예제

div ~ p {
  background-color: yellow;
}

본인이 직접 시도해 보세요

모든 CSS 조합 선택자

선택자 예제 예제 설명
element element div p 모든 <p> 요소를 <div> 요소 내에서 선택합니다.
element>element div > p div 요소가 부모 요소인 모든 p 요소를 선택합니다.
element+element div + p div 요소가 바로 뒤에 오는 모든 p 요소를 선택합니다.
element1~element2 p ~ ul p 요소가 있는 각 ul 요소를 선택합니다.

확장 독서

보조서:CSS 자식 선택자

보조서:CSS 자매 선택자

보조서:CSS 직접 자매 선택자