클래스 선택자

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

/* All 
  •  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

    css
    .red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

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

    HTML

    html
    빨간 글자색의 문단입니다.
    

    빨간 글자색과 노란 배경의 문단입니다.
    

    빨간 글자색과 "멋진" 스타일을 가진 문단입니다.
    

    이건 그냥 문단이에요.

    결과

    명세

    Specification
    Selectors Level 4
    # class-html

    브라우저 호환성