CSS 하위 선택자(Descendant Selector) 완벽 이해 – 특정 요소 내부에만 스타일 적용하기

CSS 하위 선택자란?

CSS에서 하위 선택자(후손 선택자)는 특정 요소가 다른 요소의 내부에 포함되어 있을 때만 스타일 규칙을 적용하고 싶은 경우에 사용합니다. 두 선택자 사이를 공백으로 구분하여 작성하며, 앞쪽에 오는 요소(조상) 안에 뒤쪽 요소(후손)가 존재할 때만 해당 스타일이 적용됩니다.

예를 들어, 다음과 같은 스타일 규칙은 <em> 요소가 <ul> 태그 내부에 있을 때만 적용됩니다.

ul em {
    color: #FFFF00;
}

즉, 문서 어디에 있는 <em>이라도 그 조상 중에 <ul>이 있다면 노란색(#FFFF00)으로 표시됩니다. 반대로 <p>나 <div> 등 다른 요소 안에 있는 <em>에는 이 규칙이 전혀 영향을 주지 않습니다.

<ol> 요소에 하위 선택자 적용하기

같은 방식으로 순서 목록(<ol>) 내부의 <strong> 요소에만 별도의 스타일을 지정할 수도 있습니다.

ol strong {
    color: #808000;
}

이 규칙에 따르면 <ol> 태그 안에 포함된 <strong> 요소만 올리브색(#808000)으로 표시되고, 목록 밖에 있는 <strong> 요소는 기본 굵은 글씨 스타일을 그대로 유지합니다.

하위 선택자 사용 시 알아두면 좋은 점

하위 선택자는 직계 자식뿐 아니라 손자 요소처럼 몇 단계 아래에 있는 모든 후손에게까지 적용된다는 점을 기억하세요. 만약 바로 한 단계 아래 자식 요소에만 스타일을 적용하고 싶다면, 자식 선택자(>)를 사용하는 것이 더 적합합니다.

이처럼 하위 선택자를 활용하면 문서 구조에 기반해 원하는 영역에만 정밀하게 스타일을 적용할 수 있어, 코드의 재사용성과 유지보수성이 크게 향상됩니다.