Combinator

Table of contents

1. Descendant
2. Child
3. Adjacent Sibling
4. General Sibling

Combinator Selectors

select elements based on a specific relationship between them

Descendant

(space)

선택한 요소의 모든 자손들을 고름

div p{
    background-color: yellow;
}

Child

>

선택한 요소의 바로 아래 자식

div > p {
  background-color: yellow;
}

Adjacent Sibling

+

선택(div)한 요소의 형제들 중 바로 뒤에있는 동생 1명 (같은레벨)

div + p {
  background-color: yellow;
}

General Sibling

~

선택한 요소(div)들의 형제들 중 같은 이름의 동생들(p)을 다 고름

div ~ p {
  background-color: yellow;
}