CSS 선택자 (Selector (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> 요소는 경고 상자처럼 보임) 및 "#customized" (ID가 "customized"인 요소의 기본 글꼴을 16픽셀 크기의 Lucida Grande 또는 몇 가지 대체 글꼴 중 하나로 설정) 입니다.

그런 다음, 이 CSS를 다음과 같은 일부 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>

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

같이 보기

• CSS 소개에서 CSS 선택자에 대해 더 알아보기

• 기본 선택자

  • 타입 선택자 elementname
  • 클래스 선택자 .classname
  • ID 선택자 #idname
  • 범용 선택자 * ns|* *|*
  • 속성 선택자 [attr=value]
  • 상태 선택자 a:active, a:visited

• 그룹화 선택자

  • 선택자 목록 A, B

• 결합자

  • 인접 형제 선택자 A + B
  • 일반 형제 선택자 A ~ B
  • 자식 선택자 A > B
  • 하위 선택자 A B

• 의사 요소

  • 의사 클래스 :
  • 의사 요소 ::