CSS - 선택자 결합

Selector Combinators (선택자 결합)

하위, 자식, 형제 선택자, 그룹화

하위
(모든 하위 선택)

ul li:last-of-type {
  color: red;
}

스페이싱으로 상위선택자 + 하위선택자 좁혀나갈 수 있음

#list li:last-of-type {
  color: red;
}

이런 경우 가장 큰 범위 id가 list인 박스 안의 모든 li태그 중 마지막 요소 선택되는 것(총 2개)

자식
(바로 밑의 자식들만 선택)

#list > li:last-of-type {
  color: blue;
}

바로 아래 자식들 중에서 마지막 요소만 선택하는 방법

1. 일반 형제 선택자 결합 (~)

1.
code ~ p {
  color: red;
}
2.
code ~ .red {
  color: green;
}

code태그의 앞에 있는 형제태그 p(<p>P</p>)는 선택되지 않음.
무조건 앞의 selector보다 뒤의 selector이 코드의 뒷 순서에 있어야 함

2. 인접 형제 선택자 결합(+)

1.
code + p {
  background-color: grey;
}
2.
code + div {
  background-color: grey;
}
3.
.red + div {
  background-color: burlywood;
}

🚨 (주의) 인접 형제 선택자 결합은 무조건 "바로 뒤"에 있는 해당 selector만 선택된다.

3. 그룹화

p, span, code {
  color: purple;
}

한 번에 여러 종류의 태그에 같은 스타일을 적용할 때