CSS 자식 선택자 또는 > 선택자 설명 예제


CSS 자식 선택자 기호는 부등호 > 를 사용합니다. 이 때의 자식의 의미는 마치 가계도의 부모 자식 간의 관계처럼 1촌의 관계를 말합니다. 두 요소 사이에 삽입해서 태그를 구체적으로 선택합니다.

CSS 자식 선택자

CSS 자식 선택자(Child Selector)는 부모 요소 바로 밑에 존재하는 자식 요소를 선택하는 결합자입니다. 부모 요소와 자식 요소를 결합할 때에는 > 기호를 사용합니다.


부모 요소 > 자식 요소 
{
  속성명: 속성값;
}

부모 요소란 다른 태그, 속성 등의 요소를 포함하는 경우를 말합니다. 자식 요소란 부모 요소에 직속으로 포함되는 경우를 말합니다.

CSS 부모 자식 구조

아래 문서 구조에서는 <body>, <p>, <div>, <pre> 네 개의 태그가 등장합니다. 이 요소들간의 부모 – 자식 관계는 아래 표와 같습니다.

CSS-child-combinator-2


<body> 태그의 자식은 <p><div>입니다.

HTML 문서의 부모 요소와 자식 요소
부모 요소 기호 자식 요소
<body> > <p>, <div>
<p> 없음
<div> > <pre>
<pre> 없음

<pre> 태그는 <body> 태그와 손자 관계이므로 CSS 자식 선택자가 아닙니다. 이렇게 손자 관계 이상의 하위 태그는 자손(하위/후손) 선택자라 부릅니다.

CSS 자식 선택자 예제

<body> 태그와 <p> 태그를 부모 자식 관계로 묶은 경우입니다. 아래 예제의 의미는 <body> 태그 밑에 자식으로 존재하는 <p> 태그에 글자색(color: red;) 을 변경하라는 뜻 입니다.

body > p 
{
  color: red;
}

아래와 같은 구조에서는 위의 자식 결합자를 적용할 경우 어떤 태그의 색이 변경될까요?


<!DOCTYPE html>
<html>
  <head>
    <style>
      body > p 
      {
        color:red;
      }
    </style>
  </head>
  <body>
    <p>가수 빅뱅이 가장 잘 내는 소리는?</p>
    <div>
      <pre>암소소리 (but, I love you 다 거짓말)</pre>
    </div>
  </body>
</html>

<body> 태그의 자식 관계인 <p> 태그를 선택자로 지정했으므로 <p> 태그의 텍스트만 CSS 효과가 적용됩니다.

자식 선택자가 안되는 경우

같은 예제로 자식 결합자를 다른 방식으로 조합해보겠습니다. <body> 태그 밑에 소속된 <pre> 태그는 손자 이상의 범위를 가지므로 CSS 자식 선택자가 아닙니다.

body > pre 
{
  color: red;
}

아래 예제를 실행시키면 어떤 태그에도 글씨색이 변하지 않습니다.


<!DOCTYPE html>
<html>
  <head>
    <style>
      body > pre 
      {
        color:red;
      }
    </style>
  </head>
  <body>
    <p>고양이를 싫어하는 동물은?</p>
    <div>
      <pre>미어~캣</pre>
    </div>
  </body>
</html>

왜냐하면 <pre> 태그는 <body> 태그 내부에 소속되어있지만, 두 단계 이상으로 거리가 떨어져 있기 때문입니다.

<body> 태그와 <pre> 태그는 손자 관계에 위치합니다. 후손(자손) 선택자는 기호 없이 공백을 사용합니다. 공백으로 두 태그를 이으면 후손 선택자가 되어 2촌 이상으로 떨어진 손자 관계의 태그를 선택자로 지정할 수 있습니다.

body pre
{
  color: red;
}

예제의 의미는 <body> 태그 밑에 소속된 모든 <pre> 태그를 선택자로 지정하라는 의미입니다. 모든 태그이므로 만약 자식 관계에도 <pre> 태그가 있다면 같이 선택이 될 수 있습니다.