CSS 선택자 (Selector (CSS))

CSS 선택자는 규칙이 일치하는 문서의 요소를 설명하는 CSS 규칙의 일부입니다. 일치하는 요소는 규칙에 지정된 스타일이 적용됩니다.

예제

이 CSS를 생각해보세요.

css
p {
  color: green;
}

div.warning {
  width: 100%;
  border: 2px solid yellow;
  color: white;
  background-color: darkred;
  padding: 0.8em 0.8em 0.6em;
}

#customized {
  font:
    16px Lucida Grande,
    Arial,
    Helvetica,
    sans-serif;
}

이 선택자들은 "p" (<p> 요소 내부 텍스트에 녹색을 적용), "div.warning" (class "warning"이 있는 모든 <div> (en-US) 요소는 경고 상자처럼 보임) 및 "#customized" (ID가 "customized"인 요소의 기본 글꼴을 16픽셀 크기의 Lucida Grande 또는 몇 가지 대체 글꼴 중 하나로 설정) 입니다.

그런 다음, 이 CSS를 다음과 같은 일부 HTML에 적용할 수 있습니다.

html
<p>This is happy text.</p>

<div class="warning">
  Be careful! There are wizards present, and they are quick to anger!
</div>

<div id="customized">
  <p>This is happy text.</p>

  <div class="warning">
    Be careful! There are wizards present, and they are quick to anger!
  </div>
</div>

결과 페이지 콘텐츠의 스타일은 다음과 같습니다.

같이 보기