1. Adjacent slibling combinator(인접 형제 결합자)

인접 형제 결합자( + )는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다.

구문

former_element + target_element { style properties }

ex)
/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

2. Cild combinator(자식 결합자)

자식 결합자( > )는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택한다.

구문

selector1 > selector2 { style properties }

ex)
/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

3. Descendant combinator(자손 결합자)

보통 한 칸의 공백 문자로 표현하는 자손 결합자(" ")는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택한다.

• 자손 결합자를 활용하는 선택자를 자손 선택자라고 부른다.

구문

selector1 selector2 { property declarations }

ex)
/* List items that are descendants of the "my-things" list */
ul.my-things li {
  margin: 2em;
}

4. General sibling combinator(일반 형제 결합자)

일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택한다. 두 요소가 서로 붙어있을 필요는 없다.

구문

former_element ~ target_element { style properties }

ex)
/* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 */
img ~ p {
  color: red;
}

5. Selector list(선택자 목록)

선택자 목록( , )은 일치하는 모든 요소를 선택한다.

구문

element, element, element { style properties }

ex)
/* 모든 span과 div 요소 선택 */
span,
div {
  border: red 2px solid;
}