CSS 자손 선택자

자손 선택자(descendant selector)는 포함 선택자라고도 합니다.

자식 선택자는 특정 요소의 자식으로 있는 요소를 선택할 수 있습니다.

컨텍스트에 따라 요소를 선택하다

우리는 자식 선택자를 정의하여 특정 문서 구조에서 작동하고 다른 구조에서는 작동하지 않는 규칙을 만들 수 있습니다.

예를 들어, h1 요소의 em 요소에만 스타일을 적용하려면 다음과 같이 작성할 수 있습니다:

h1 em {color:red;}

위의 규칙은 h1 요소의 자식으로 있는 em 요소의 텍스트를 빨간색으로 만들 것입니다. 다른 em 텍스트(예: 문단이나 블록 인용에서의 em)는 이 규칙에 선택되지 않습니다:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

본인이 직접 시도해보세요

물론, h1에서 찾을 수 있는 각 em 요소에 클래스 속성을 추가할 수도 있습니다. 그러나 자식 선택자의 효율성은 분명히 높습니다.

문법 설명

자식 선택자에서, 규칙 왼쪽의 선택자는 두 개나 많이 공백으로 구분된 선택자를 포함합니다. 선택자 사이의 공백은 결합자입니다. 각 공백 결합자는 '...에서...를 찾기'、'...은...의 일부'、'...은...의 자식'으로 해석할 수 있습니다. 그러나 선택자를 오른쪽에서 왼쪽으로 읽어야 합니다.

따라서, h1 em 선택자는 'h1 요소의 자식으로 있는 모든 em 요소'로 해석할 수 있습니다. 선택자를 좌우로 읽을 때, 다음과 같은 표현을 사용할 수 있습니다: 'em을 포함하는 모든 h1은 다음 스타일을 적용합니다'.

특정 적용

자식 선택자의 기능은 매우 강력합니다. 이를 통해 HTML에서 불가능하다고 생각했던 작업을 가능하게 할 수 있습니다.

문서가 하나의 바닥 콘텐츠와 하나의 주区域的가 있을 때를 가정해 보겠습니다. 바닥 콘텐츠의 배경은 파란색이고, 주区域的 배경은 흰색입니다. 이 두 区域은 모두 링크 목록을 포함합니다. 모든 링크를 파란색으로 설정할 수 없습니다. 왜냐하면 그렇게 하면 바닥 콘텐츠의 파란색 링크가 보이지 않기 때문입니다.

해결책은 자식 선택자를 사용하는 것입니다. 이 경우, 바닥 콘텐츠를 포함하는 div에 sidebar의 클래스 속성을 지정하고, 주区域的 클래스 속성 값을 maincontent로 설정합니다. 그런 다음 다음 스타일을 작성합니다:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

자손 선택자에 대해 가장 쉽게 무시할 수 있는 한가지는 두 요소 간의 계층 간격이 무한할 수 있다는 점입니다.

예를 들어, ul em이라고 써도 이 문법은 ul 요소에서 상속된 모든 em 요소를 선택하며, em의 들여쓰기层级와 관계없이 선택합니다.

따라서, ul em은 다음 태그 중 모든 em 요소를 선택합니다:

<ul>
  <li>목록 항목 1</li>
    <ol>
      <li>목록 항목 1-1</li>
      <li>목록 항목 1-2</li>
      <li>목록 항목 1-3</li>
        <ol>
          <li>목록 항목 1-3-1</li>
          <li>목록 항목</li> <em>1-3-2</em></li>
          <li>목록 항목 1-3-3</li>
        </ol>
      </li>
      <li>목록 항목 1-4</li>
    </ol>
  </li>
  <li>목록 항목 2</li>
  <li>목록 항목 3</li>
</ul>

본인이 직접 시도해보세요