부모·자식·형제 관계를 조합자로 선택합니다.
공백은 모든 후손, >는 바로 아래 자식, +는 바로 다음 형제, ~는 뒤의 모든 형제를 선택합니다. 관계를 너무 깊게 묶으면 HTML 변경에 취약합니다.
이번 예제의 출발점은 .stage > .target + .target입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 +를 ~로 바꾸고 세 번째 요소를 추가해 차이를 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
공백과 >를 같은 의미로 보면 중첩 구조가 바뀔 때 예상치 못한 요소까지 선택됩니다.
직접 바꿔보세요+를 ~로 바꾸고 세 번째 요소를 추가해 차이를 확인하세요.