CSS에서 여러 선택자를 연이어 작성하기
여러 선택자에 동시에 해당하는 요소를 선택하려면, 이 선택자들을 공백 없이 연이어 작성해야 합니다.
예를 들어, 다음 선택자는 클래스 bbb와 클래스
zzz를 동시에 가진 요소를 선택합니다:
.bbb.zzz {
}
그리고 다음 선택자는 클래스 bbb와 클래스
zzz를 동시에 가진 h2 제목 요소를 선택합니다:
h2.bbb.zzz {
}
이 방식을 사용하여 다양한 선택자 구성을 만들 수 있습니다. 이때 사용된 선택자의 순서는 중요하지 않으며, 단지 태그 선택자는 가장 앞에 위치해야 한다는 규칙만 있습니다.
즉, 예를 들어 선택자 .bbb.zzz
와 .zzz.bbb는 완전히 동일합니다.
또한, id를 사용하여 선택자를 구성할 수도 있습니다.
예: #elem.eee, 또는 h2#elem.eee,
또는 h2.eee#elem 등.
아래 코드의 선택자가 어떤 요소를 선택하는지 설명해 보세요. 그런 다음 이 선택자에 해당하는 HTML 코드를 작성해 보세요. 선택자가 있는 코드입니다:
.bbb.zzz {
color: red;
}
아래 코드의 선택자가 어떤 요소를 선택하는지 설명해 보세요. 그런 다음 이 선택자에 해당하는 HTML 코드를 작성해 보세요. 선택자가 있는 코드입니다:
h2.bbb.zzz {
color: red;
}
아래 코드의 선택자가 어떤 요소를 선택하는지 설명해 보세요. 그런 다음 이 선택자에 해당하는 HTML 코드를 작성해 보세요. 선택자가 있는 코드입니다:
#elem.bbb {
color: red;
}
아래 코드의 선택자가 어떤 요소를 선택하는지 설명해 보세요. 그런 다음 이 선택자에 해당하는 HTML 코드를 작성해 보세요. 선택자가 있는 코드입니다:
#elem.bbb.zzz {
color: red;
}
아래 코드의 선택자가 어떤 요소를 선택하는지 설명해 보세요. 그런 다음 이 선택자에 해당하는 HTML 코드를 작성해 보세요. 선택자가 있는 코드입니다:
h2#elem.bbb {
color: red;
}
