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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.