하위 선택자에서 초보자가 자주 하는 실수

다음 선택자를 살펴보세요:

p.eee {
	color: red;
}

여러분은 이미 이러한 선택자가 클래스 eee를 가진 단락을 선택한다는 것을 알고 있어야 합니다. 예를 들면 다음과 같습니다:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

이제 이 선택자를 살펴보세요:

p .eee {
	color: green;
}

이 선택자는 태그 이름과 클래스 이름 사이에 공백이 있다는 점에서 이전 선택자와 다릅니다. 이 공백은 하위 선택자(descendant selector)를 나타냅니다. 즉, 이 경우 우리는 단락 안에 있는 클래스 eee를 가진 모든 요소를 선택합니다. 예를 들어, 이 선택자는 다음과 같은 span 요소를 선택합니다:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

코드 실행 결과:

다시 한 번 강조하겠습니다: p.eee — 이러한 선택자는 클래스 eee를 가진 단락을 선택합니다. 하지만 만약 p .eee와 같이 작성한다면, 단락 내부에 있는 클래스 eee를 가진 모든 요소를 선택하게 됩니다. 이 차이점을 명확히 이해하세요.

아래 코드의 선택자가 무엇을 선택하는지 설명해 보세요. 그런 다음 이 선택자에 맞는 HTML 코드를 작성해 보세요. 선택자가 있는 코드는 다음과 같습니다:

p.bbb {
	color: red;
}

p .bbb {
	color: red;
}

.eee p.bbb {
	color: red;
}

.eee p .bbb {
	color: red;
}