이 페이지는 영어로부터 커뮤니티에 의하여 번역되었습니다. MDN Web Docs에서 한국 커뮤니티에 가입하여 자세히 알아보세요.

클래스 선택자

CSS 클래스 선택자는 요소의 class 특성에 기반해 요소를 선택합니다.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

구문

.class_name { style properties }

위의 구문은 특성 선택자를 사용한 다음 구문과 동일합니다.

[class~=class_name] { style properties }

예제

CSS

.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

HTML

<p class="red">빨간 글자색의 문단입니다.</p>
<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p>
<p class="red fancy">빨간 글자색과 "멋진" 스타일을 가진 문단입니다.</p>
<p>이건 그냥 문단이에요.</p>

결과

명세

Specification Status Comment
Selectors Level 4
The definition of 'class selectors' in that specification.		 Working Draft No changes
Selectors Level 3
The definition of 'class selectors' in that specification.		 Recommendation
CSS Level 2 (Revision 1)
The definition of 'child selectors' in that specification.		 Recommendation
CSS Level 1
The definition of 'child selectors' in that specification.		 Recommendation Initial definition

브라우저 호환성

BCD tables only load in the browser