CSS Combinators

combinator는 selector(선택자) 간의 관계를 설명해준다.

CSS 선택자는 하나 이상의 선택자를 포함할 수 있다. 단순한 선택자 사이에 combinator를 포함할 수 있다.

CSS에는 4가지 다른 combinator가 있다.

descendant selector(space)

child selector(>)

adjacent sibling selector(+)

general sibling selector(~)

descendant selector

지정된 요소의 모든 자손 요소를 매칭한다.

<div>태그의 자손 중 <p>태그의 배경 색을 노랑으로 바꾼다.

예시

child selector

지정된 요소의 바로 아래 자식 요소만 선택한다.

자손 선택자와의 차이가 있다.

<div>태그 중 바로 아래의 자식 <p>태그의 배경색을 노랑으로 바꾼다. 자손 선택자는 <span> 안에 있는 <p>에도 영향을 주지만 자식 선택자는 그렇지 않다.

예시

adjacent sibling selector

지정된 요소의 인접한 형제들을 모두 선택한다.

형제 요소들은 반드시 같은 부모 요소를 가져야 한다. "인접"의 의미는 바로 뒤따른다는 것.

<div>요소 바로 뒤에 나오는 <p>태그는 인접한 형제 요소이다.

예시

general sibling selector

지정된 요소의 형제 요소를 모두 선택한다.

<div>태그의 형제인 <p>태그를 모두 선택해서 배경색을 노랑으로 만든다.

예시

https://www.w3schools.com/css/css_combinators.asp