bibaram스타일을 적용할 대상을 지정하는 것이기 때문이지요.
a { color: red; }
.test { color: green; }
#title { color: blue; }
.test { color: green; }
#title { color: blue; }
위의 코드는 중요한 3가지 선택자의 예입니다.
a
이것은 가장흔히 쓰이는 요소선택자입니다.
지정된 태그가 사용된 모든것에 스타일을 적용하지요.
.test
이것은 클래스선택자입니다.
<span class="test">
와 같이 태그에 클래스속성을 적어서 스타일을 적용할 요소를 선택합니다.
class="test"가 들어간 모든태그는 선언된 스타일이 적용됩니다.
#title
이것은 ID선택자입니다.
<div id="title">
에서 처럼태그의 ID속성과 일치하는 요소에 스타일이 적용됩니다.
id는 하나만 존재할수 있기 때문에, 클래스선택자와 다르게 여러곳에 적용할수가 없지요.
집단화(그룹화)
font, b, span, div { color: pink; }
위와 같이 각 태그명을 컴마(,)로 구분하여 적어주면,
font, b, span, div 모두에 스타일이 적용됩니다.
문맥선택자
H1 EM { color: blue; }
<H1>This headline is <EM>very</EM> important</H1>
<H1>This headline is <EM>very</EM> important</H1>
위의 의미는 hi태그안의 em태그에 스타일을 적용한다는 뜻입니다.
This headline is very important
와 같이 표현되지요.
여기서 재미있는 응용이 가능합니다.
(익스와 파이어폭스에서 집단화와 문맥선택자는 거의 완전하게 지원하는걸로 보입니다.)
div .head span { color: black; }
#title span, .head span, body div div span { color: #FFF; }
#title span, .head span, body div div span { color: #FFF; }
위와 같이 사용할수도 있는 것입니다.
문맥선택자와 ID선택자만으로도 클래스선택자 거의 없이 스타일을 적용할수가 있지요.
참고로 클래스선택자와 ID선택자 앞에 태그명을 적어줄수 있습니다.
div.title { max-size: 100%; }
span#head { display: none; }
span#head { display: none; }
위에 것의 의미는 div태그중 클래스가 title인것에 스타일을 적용하는것이고,
아래쪽은 span태그중 id가 head인것에 적용하는 것입니다.
(ID선택자에 요소선택자까지 붙이는건 별로 의미가 없지요. ID는 유일한 것이니까요)
덤.
속성선택자
속성선택자는 익스에서 테스트해보니 완전히 무시하는군요.(아마 완전무시일듯.)
p[align] { ... }
위의 선언은 p태그중 align속성을 넣은 경우에 스타일을 적용합니다.p[align="center"] { ... }
이경우는<p align="center">
인 경우에 스타일을 적용합니다.
그렇기에,
p[class="head"] { ... }
p.head { ... }
p.head { ... }
위의 두 코드는 같은 대상을 지정하는 것이지요.
잊은것;
공통선택자
* { color: #123456; }
*이 바로 공통선택자입니다.
저렇게 선언을 하면 모든요소에 공통으로 스타일을 적용하게 됩니다
