CSS 클래스 선택자

CSS에서 클래스 선택자는 점 기호로 표시됩니다：

.center {text-align: center}

위의 예제에서 center 클래스를 가진 모든 HTML 요소는 중앙 정렬됩니다.

아래의 HTML 코드에서 h1과 p 요소 모두 center 클래스를 가집니다. 이는 두 요소가 ".center" 선택자의 규칙을 따를 것을 의미합니다.

<h1 class="center">
이 제목은 중앙 정렬됩니다
</h1>
<p class="center">
이 문단은 중앙 정렬됩니다.
</p>

주의:클래스 이름의 첫 번째 문자는 숫자를 사용할 수 없습니다! Mozilla나 Firefox에서는 작동하지 않습니다.

id와 마찬가지로 class도 파생 선택자로 사용될 수 있습니다：

.fancy td {
	color: #f60;
	background: #666;
	}

이 예제에서는 fancy라는 이름의 더 큰 요소 내부의 테이블 셀들이 회색 배경으로的文字를 표시합니다. (fancy라는 이름의 더 큰 요소는 테이블이나 div일 수 있습니다.)

요소는 그 클래스에 기반하여 선택될 수도 있습니다:}

td.fancy {
	color: #f60;
	background: #666;
	}

위의 예제에서, 클래스 이름이 fancy인 테이블 셀은 회색 배경의 주황색이 됩니다.

<td class="fancy">

클래스 fancy를 어떤 테이블 요소에도 여러 번 할 수 있습니다. fancy로 표시된 셀은 회색 배경의 주황색입니다. fancy 이름의 클래스가 할당되지 않은 셀은 이 규칙에 영향을 받지 않습니다. 또한, fancy 클래스가 있는 문단도 회색 배경의 주황색이 되지 않으며, 자연스럽게 다른 fancy로 표시된 요소도 이 규칙에 영향을 받지 않습니다. 이는 이 규칙을 작성하는 방식 때문입니다. 이 효과는 fancy로 표시된 테이블 셀(즉 td 요소를 사용하여 fancy 클래스를 선택하는)에 제한됩니다.

관련 내용

클래스 선택자에 대한 더 깊은 학습이 필요하시다면, CodeW3C.com 고급 강의를 참조하세요:CSS 클래스 선택자 상세 설명。