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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Class selector (.className)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: mdnwebdocs-bot, alattalatta
최종 변경자: mdnwebdocs-bot,