부모·자식·형제 관계를 조합자로 선택합니다.
공백은 모든 후손, >는 바로 아래 자식, +는 바로 다음 형제, ~는 뒤의 모든 형제를 선택합니다. 관계를 너무 깊게 묶으면 HTML 변경에 취약합니다.
직계 자식 조합자를 쓴 .stage > .target은 .stage 바로 아래의 두 div를 모두 고르고, .target + .target은 바로 앞에 .target 형제가 붙어 있는 두 번째 div만 골라 위쪽 간격과 왼쪽 선을 줍니다. .stage ~ p는 .stage 뒤에 오는 형제 문단만 골라서, 맨 아래 문단은 갈색이 되고 .stage보다 앞에 있는 lead 문단은 그대로입니다.
조합자는 모두 뒤쪽 형제나 아래쪽 후손 방향으로만 고르기 때문에 앞에 있는 형제나 부모를 직접 선택할 수 없습니다. 그 방향이 필요하면 :has()를 써서 .lead:has(+ .stage)처럼 바로 뒤에 .stage가 오는 문단을 고를 수 있습니다.
공백과 >를 같은 의미로 보면 중첩 구조가 바뀔 때 예상치 못한 요소까지 선택됩니다.
직접 바꿔보세요+를 ~로 바꾸고 세 번째 요소를 추가해 차이를 확인하세요.