CSS 자식 선택자(>)로 부모가

인 모든

요소 선택하기

CSS 자식 선택자(element > element)란?

CSS에서 element > element 선택자는 특정 요소를 직계 부모로 가지는 자식 요소만을 선택하는 선택자입니다. 예를 들어 div > p와 같이 작성하면, 부모 요소가 <div>인 <p> 요소에만 스타일이 적용됩니다.

이 선택자의 가장 큰 특징은 후손 선택자(descendant selector)와 달리 직계 자식에만 한정된다는 점입니다. 즉, <div>보다 더 깊은 단계에 있는 <p> 요소에는 스타일이 적용되지 않습니다.

부모가 <div>인 모든 <p> 요소 선택하기

아래 예제 코드를 실행하면 부모가 <div> 요소인 모든 <p> 요소를 선택하여 스타일을 적용할 수 있습니다.

예제 코드

<!DOCTYPE html>
<html>
    <head>
       <style>
          div > p {
             color: white;
             background-color: blue;
          }
       </style>
    </head>

    <body>
       <h1>Demo Website</h1>
       <h2>Fruits</h2>
       <p>Fruits are good for health.</p>
       <div>
          <p>This is demo text.</p>
       </div>
    </body>
</html>

실행 결과 설명

<div> 안에 있는 "This is demo text." 문단은 div > p 규칙에 의해 흰색 글자 + 파란색 배경으로 표시됩니다.
<body> 바로 아래에 있는 "Fruits are good for health." 문단은 부모가 <div>가 아니므로 해당 스타일의 영향을 받지 않습니다.

이처럼 자식 선택자(>)를 활용하면 HTML 구조에서 원하는 계층 관계의 요소만 정확하게 타겟팅할 수 있어, 불필요한 스타일 오염 없이 깔끔한 CSS를 작성할 수 있습니다.