CSS 클래스 선택자 (.class) – 클래스 이름으로 요소 선택

정의 및 사용 방법

.class 선택자는
지정된 class 이름의 클래스가 있는 요소를 모두 선택합니다.
대소문자를 구분합니다.

. 바로 다음에 지정할 class 이름을 붙이면, 이 이름의 클래스가 있는 모든 요소를 나타냅니다.

예를 들어, .alert은 alert이라는 이름의 클래스가 있는 모든 요소를 선택하는 선택자입니다.

기본 예제

CSS

.alert { /* alert 클래스를 선택 */
    padding: 0.5em;
    background-color: gold;
}
.caution { /* caution 클래스를 선택 */
    color: orangered;
}

HTML

<p class="alert">알릴 내용이 있습니다.</p>
<p>문단 요소입니다.</p>
<p class="alert caution">주의할 내용이 있습니다.</p>
<p>문단 요소입니다.</p>

class 속성은
요소에 하나 이상의 클래스 이름을 지정하는 속성입니다.
하나의 요소에 여러 개의 클래스 이름을 지정할 수 있습니다. 그래서 class 속성은 클래스 이름으로 된 목록을 지정한다고 말하기도 합니다.

HTML class 속성

하나의 요소에 여러 개의 클래스 이름을 지정하려면 class 속성의 값에 띄어쓰기로 구분하여 여러 개의 이름을 지정합니다.

CSS의 .alert 선택자는 요소들 중에서 클래스의 이름이 alert인 요소들을 분류해서 스타일링합니다. 그리고, CSS의 .caution 선택자는 요소들 중에서 클래스의 이름이 caution인 요소들을 분류해서 스타일링합니다.

<p class="alert caution">주의할 내용이 있습니다.</p> 요소는 클래스의 이름이 두 개(alert과 caution)입니다.
이 요소는 .alert 선택자와 .caution 선택자에 공통으로 분류되었기 때문에 두 선택자에 해당하는 스타일링이 모두 적용됩니다.

서로 다른 요소가 동일한 클래스 이름을 공유할 수 있습니다.

구문

위의 구문은 다음의 [attribute~="value"] 선택자 구문으로 선택한 요소와 동일합니다.

[attribute~="value"] 선택자는
지정된 attribute라는 이름의 속성이 value라는 단어를 포함하는 값이 있는 모든 요소를 선택합니다.

[attribute~="value"] 선택자

.class_name 선택자와 [attribute~="value"] 속성 선택자로 선택한 요소는 동일하지만,
.class_name 선택자는 [attribute~="value"] 속성 선택자보다 클래스 이름을 선택했다는 것에서 더 명시적이며, 간편하게 작성할 수 있습니다.