CSS 클래스 선택자 상세 설명

클래스 선택자는 문서 요소와 독립적으로 스타일을 지정할 수 있습니다.

CSS 클래스 선택자

클래스 선택자는 문서 요소와 독립적으로 스타일을 지정할 수 있습니다.

이 선택자는 단독으로 사용할 수도 있으며, 다른 요소와 함께 사용할 수도 있습니다.

푸시:이 선택자를 사용하려면 문서를 적절히 표시해야 하므로, 이 두 가지 선택자를 사용하려면 일단 몇 가지 고안과 계획을 해야 합니다.

특정 디자인 요소에 관계없이 스타일을 적용하려면 가장 일반적인 방법은 클래스 선택자를 사용하는 것입니다.

HTML 코드 수정

클래스 선택자가 정상적으로 작동하도록 문서 표시를 수정해야 합니다.

클래스 선택자의 스타일을 요소와 연결하기 위해 class를 적절한 값을 지정해야 합니다. 아래의 HTML 코드를 참조하세요:

<h1 class="important">
이 제목은 매우 중요합니다.
</h1>
<p class="important">
이 문단은 매우 중요합니다.
</p>

위의 코드에서 두 요소의 class 모두 important로 지정되었습니다: 첫 번째 제목(h1 요소), 두 번째 문단(p 요소).

문법

그런 다음, 이러한 분류된 요소에 스타일을 적용하기 위해 다음과 같은 문법을 사용합니다. 즉, 클래스 이름 앞에 점(.)을 두고 와이드 선택자를 결합합니다:

*.important {color:red;}

모든 클래스 이름이 같은 요소를 선택하고 싶다면, 클래스 선택자에서 와이드 선택자를 무시할 수 있으며, 이는 어떤 해로운 영향도 없습니다:

.important {color:red;}

직접 테스트해 보세요

요소 선택자와 결합

클래스 선택자는 요소 선택자와 결합하여 사용할 수 있습니다.

예를 들어, 단지 구절이 빨간 텍스트로 표시되기를 원할 수 있습니다:

p.important {color:red;}

선택자는 now class 속성이 important를 포함한 모든 p 요소를 매칭하며, 다른 유형의 요소는 매칭되지 않습니다. 선택자 p.important는 'class 속성이 important인 모든 구절'을 의미합니다. h1 요소가 구절이 아니라는 점을 고려할 때, 이 규칙의 선택자와 매칭되지 않기 때문에 h1 요소는 빨간 텍스트로 변하지 않습니다.

h1 요소에 다른 스타일을 지정하고 싶다면, 선택자 h1.important를 사용할 수 있습니다:

p.important {color:red;}
h1.important {color:blue;}

직접 테스트해 보세요

CSS 다중 클래스 선택자

이전 장에서 class 값에 단어가 하나 포함된 경우를 다루었습니다. HTML에서 class 값에는 단어 목록이 포함될 수 있으며, 각 단어는 공백으로 구분됩니다. 예를 들어, 특정 요소를 중요(important)와 경고(warning)로 동시에 표시하고 싶다면 다음과 같이 작성할 수 있습니다:

<p class="important warning">
This paragraph is a very important warning.
</p>

이 두 단어의 순서는 중요하지 않으며, warning important로 작성할 수도 있습니다.

우리는 class가 important인 모든 요소가 두껍게, class가 warning인 모든 요소가 기울어져 있으며, important와 warning을 모두 포함한 모든 요소에는 은빛 배경이 있음을 가정합니다. 그렇다면 다음과 같이 작성할 수 있습니다:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

직접 테스트해 보세요

두 개의 클래스 선택자를 연결하여 선택할 수 있습니다이러한 클래스 이름을 모두 포함한 것요소(클래스 이름 순서는 관계없음).

다중 클래스 선택자가 클래스 이름 목록에 없는 클래스 이름을 포함하면 일치가 실패합니다. 다음 규칙을 참조하세요:

.important.urgent {background:silver;}

이 선택자는 class 속성에 'important'과 'urgent'이라는 단어가 포함된 p 요소를 일치시킵니다. 따라서, class 속성에 'important'과 'warning'이라는 단어만이 있는 p 요소는 일치하지 않습니다. 그러나 다음 요소와 일치할 수 있습니다:

<p class="important urgent warning">
이 문단은 매우 중요하고 긴급한 경고입니다.
</p>

직접 테스트해 보세요

중요 사항:IE7 이전 버전에서는 다른 플랫폼의 인터넷 익스플로러가 다중 클래스 선택자를 올바르게 처리할 수 없습니다.