CSS 에서 다른 태그/앨리먼트에 CSS 적용하기

가끔 A 태그에 hover시 다른 엘리먼트에 CSS 효과를 적용하고 싶을 때가 있다
이럴 땐 ^, >, ~, = 를 통하여 구현 할 수 있다

B 엘리먼트가 A 엘리먼트 바로 안에 들어올 때

A > B #A:hover > #B { background-color: yellow; }

B 엘리먼트가 A 엘리먼트 영역 밖에 있을 때

A + B #A:hover + #B { background-color: yellow; }

B 엘리먼트가 A 엘리먼트 영역 안의 어딘가에 있을 때

A B ( A태그와 B태그 사이에 빈칸 ) #A:hover #B { background-color: yellow; }

B 엘리먼트가 A 엘리먼트 의 자손일 때

A ~ B #A:hover ~ #B { background-color: yellow; }

CSS는 잘 먹었지만 결과물은 처참했다
내가 이런걸 만들 줄이야.. ^^
다른 방법을 시도해보도록 한다

참고 사이트