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> 요소는 경고 상자처럼 보임) 및 "#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>
결과 페이지 콘텐츠의 스타일은 다음과 같습니다.