선택자 결합 기호를 사용해서 요소 선택

CSS에서는 선택자 사이에 결합 기호(Combinators)를 사용하여 요소를 선택할 수 있습니다.
이렇게 결합 기호를 사용해 관계를 지정하는 선택자를 결합 선택자(또는 조합 선택자, Complex selectors)라고 합니다.

결합 기호(Combinators)

결합 기호(Combinators)란 선택자와 선택자 사이에 특별한 관계나 의미를 정의하는 기호입니다.
이 기호를 사용하면 선택자들을 결합하여 새로운 요소를 선택할 수 있습니다.

이렇게 결합 기호를 사용해 만들어진 선택자를 결합 선택자(또는 조합 선택자, Complex selectors)라고 합니다.

결합 기호의 의미

  • 자손 결합(공백 문자,  ) - 이 기호 오른쪽 선택자는 왼쪽 선택자의 모든 타깃 자손 요소가 됩니다.
  • 자식 결합(>) - 이 기호 오른쪽 선택자는 왼쪽 선택자의 모든 타깃 자식 요소가 됩니다.
  • 이후 형제 결합(~) - 이 기호 오른쪽 선택자는 왼쪽 선택자 이후에 위치한 모든 타깃 형제 요소가 됩니다.
  • 다음 형제 결합(+) - 이 기호 오른쪽 선택자는 왼쪽 선택자 바로 다음에 위치한 타깃 형제 요소가 됩니다.

결합 선택자 목록

결합 선택자 목록
selectorA selectorB 요소의 타깃 자손 요소를 모두 선택
자손 선택자(Descendant combinator, 띄어쓰기 공백)는 앞에서 지정한 요소의 타깃 자손 요소를 모두 선택합니다. '선택자A 선택자B' 형태의 선택자로, 선택자와 선택자를 구분하는 띄어쓰기( , 공백)가 있으며 선택자A 요소 안에 위치한 타깃 자손 요소인 선택자B를 모두 선택합니다.
selectorA > selectorB 요소의 타깃 자식 요소를 모두 선택
자식 선택자(Child combinator, >)는 앞에서 지정한 요소의 타깃 자식 요소를 모두 선택합니다. '선택자A > 선택자B' 형태의 선택자로, 선택자와 선택자를 구분하는 기호(>)가 있으며 선택자A 요소 안에 위치한 타깃 자식 요소인 선택자B를 모두 선택합니다.
selectorA ~ selectorB 요소 뒤에 있는 모든 타깃 형제 요소를 선택
이후 형제 선택자(Subsequent-sibling combinator, ~)는 앞에서 지정한 요소 이후에 위치한 모든 타깃 형제 요소를 선택합니다. '선택자A ~ 선택자B' 형태의 선택자로, 선택자와 선택자를 구분하는 물결 기호(~, tilde라고도 함)가 있으며 선택자A 이후에 위치한 모든 타깃 형제 요소인 선택자B를 선택합니다.
selectorA + selectorB 요소 바로 뒤에 있는 타깃 형제 요소를 선택
다음 형제 선택자(Next-sibling combinator, +)는 앞에서 지정한 요소 바로 다음에 위치한 타깃 형제 요소만을 선택합니다. '선택자A + 선택자B' 형태의 선택자로, 선택자와 선택자를 구분하는 플러스 기호(+)가 있으며 선택자A 바로 다음에 위치한 타깃 형제 요소인 선택자B를 선택합니다.

명세서

선택자 결합 기호의 명세서 사양
명세서 사양
Combinators Selectors Level 4
#combinators

같이 보기