CSS 파생 선택자

기본 선택자

요소가 그 위치의 상황 관계를 기준으로 스타일을 정의하면 표지가 더 간결해질 수 있습니다.

CSS1에서는 이와 같은 방식으로 규칙을 적용하는 선택자를 상황 선택자(contextual selectors)라고 부르며, 이는 규칙을 적용하거나 피하는 데 상황 관계에 의존하기 때문입니다. CSS2에서는 이를 기본 선택자라고 부르지만, 어떤 이름을 붙여도 그 역할은 동일합니다.

기본 선택자는 문서의 상황 관계를 기준으로 특정 태그의 스타일을 결정할 수 있게 합니다. 기본 선택자를 적절히 사용하면 HTML 코드가 더 정리될 수 있습니다.

예를 들어, 목록 내 strong 요소가 일반 굵은 글자 대신 기울임 글자로 되도록 원하는 경우 이렇게 기본 선택자를 정의할 수 있습니다:

li strong {
    font-style: italic;
    font-weight: normal;
  }

표시된 strong에 대한 파란 코드의 상황 관계를 주의하세요:

<p><strong>나는 목록에 없기 때문에 이 규칙이 나에게 적용되지 않기 때문에 나는 굵은 글자가 아니라 기울임 글자입니다.</strong></p>
<ol>
<li><strong>나는 기울임이 있습니다. 이는 strong 요소가 li 요소 내에 위치한 것 때문입니다.</strong></li>
<li>나는 일반 글자체입니다.</li>
</ol>

위의 예제에서는 strong 요소의 스타일이 li 요소 내 strong 요소에만 기울임이 주어져 있으며, strong 요소에 특별한 class나 id를 정의할 필요가 없어 코드가 더 간결합니다.

다음 CSS 규칙을 다시 보세요:

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

아래는 그 영향을 받는 HTML입니다:

<p>이 문단에서 강조된 단어는<strong>빨간색</strong>입니다.</p>
<h2>이 서브헤더는 또한 빨간색입니다.</h2>
<h2>이 서브헤더에서 강조된 단어는<strong>blue</strong>.</h2>

관련 내용

파생 선택자에 대해 더 깊이 배우고 싶다면, CodeW3C.com 고급 강의에서 다음 내용을 읽어보세요: