CSS 요소 선택자

CSS 요소 선택자

가장 일반적인 CSS 선택자는 요소 선택자입니다. 다시 말해, 문서의 요소는 가장 기본적인 선택자입니다.

HTML 스타일을 설정할 때, 선택자는 일반적으로 p, h1, em, a와 같은 HTML 요소, 심지어 html 자체일 수 있습니다:

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

직접 시도해 보세요

스타일을 하나의 요소에서 다른 요소로 전환할 수 있습니다.

위의 문단 텍스트(그리고 h1 요소 대신)를 회색으로 설정하려면, h1 선택자를 p로 변경하면 됩니다:

html {color:black;}
p {color:gray;}
h2 {color:silver;}

직접 시도해 보세요

타입 선택자

W3C 표준에서는 요소 선택자를 타입 선택자(타입 선택자)라고 합니다.

“타입 선택자는 문서 언어 요소 타입의 이름을 일치시킵니다. 타입 선택자는 문서 트리에서 해당 요소 타입의 모든 인스턴스와 일치시킵니다.”

아래의 규칙은 문서 트리 중에서 모든 h1 요소와 일치합니다:

h1 {font-family: sans-serif;}

따라서, 우리는 XML 문서의 요소에 스타일을 설정할 수도 있습니다:

XML 문서:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS 문서:

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

결과 확인

위의 예제에서 CSS 요소 선택자(타입 선택자)가 XML 문서의 요소 스타일을 설정할 수 있음을 볼 수 있습니다.

XML 문서에 스타일을 추가하는 방법에 대해 더 알고 싶다면, CodeW3C의 XML 강의。