CSS와 HTML에서 자식 요소가 있을 때 부모 요소에 스타일 적용하는 방법

CSS에서 부모 선택자의 한계

CSS3에는 부모 요소를 직접 선택할 수 있는 선택자가 존재하지 않습니다. 즉, 특정 자식 요소를 가지고 있는 부모 요소에만 스타일을 적용하려는 경우 표준 CSS만으로는 구현하기 어렵습니다.

CSS4 제안: $ 선택자

다행히 CSS4에서는 이러한 문제를 해결하기 위해 부모 선택자 역할을 하는 $ 기호가 제안되었습니다. 이를 활용하면 다음과 같이 작성할 수 있습니다(li 요소를 선택하는 예시).

ul $li ul.sub { ... }

위 코드는 ul.sub라는 자식 요소를 포함하고 있는 li 요소를 대상으로 스타일을 적용한다는 의미입니다.

jQuery를 활용한 실용적인 대안

CSS4의 $ 선택자가 아직 브라우저에서 널리 지원되지 않는 상황이라면, jQuery를 사용하는 것이 가장 현실적인 해결책입니다. 다음 한 줄의 코드로 원하는 결과를 손쉽게 얻을 수 있습니다.

$('ul li:has(ul.sub)').addClass('has_sub');

:has() 선택자는 지정된 선택자와 일치하는 자식 요소를 하나 이상 포함하고 있는 모든 요소를 선택합니다. 참고로 <li> 태그는 목록의 개별 항목을 정의하며, <ul> 태그는 순서 없는(불릿) 목록을 정의합니다.

추가한 클래스 스타일링하기

위 코드를 실행하면 하위 목록(ul.sub)을 포함한 li 요소에 has_sub 클래스가 자동으로 추가됩니다. 이제 CSS에서 다음과 같이 해당 클래스를 스타일링하면 됩니다.

li.has_sub { ... }

이 방식을 활용하면 JavaScript로 클래스를 부여한 뒤 CSS로 디자인을 제어할 수 있어, 부모 선택자가 없는 환경에서도 유연하게 원하는 UI를 구현할 수 있습니다.