선택자(Selector)란 스타일을 지정할 대상을 말합니다
선 택자의 종류로는 타입 선택자(type selector), 전체 선택자(universal selector), 하위 선택자(descendant selector), 자식 선택자(child selector), 인접 형제 선택자(adjacent sibling selector), 애트리뷰트 선택자(attribute selector), 클래스 선택자(class selector), ID 선택자 (ID selector), 가상 앨리먼트(pseudo-element), 가상 클래스(pseudo-class)등이 있습니다.
선택자는 결합자(공백, ">", "+")에 의하여 하나 이상의 단순 선택자들의 연속(chain)이다. 또한 이러한 선택자들을 콤마로 그룹지을 수 있습니다.
선택자 체인의 예
ol li span { /* 공백 : 하위 선택자
font-size: 0.9em;
}
body > p { /* > : 자식 선택자
line-height: 1.6em;
}
div + p { /* + : 형제 선택자
font-size: 0.9em;
}
그럼 하나하나 알아보도록 하겠습니다.
전체 선택자(universal selector)
전체 선택자는 "*"로 표시하며 모든 엘리먼트를 포함합니다
다음과 같이 사용할 수 있습니다.
* {
padding: 0;
margin: 0;
border: 0;
}
브라우저마다 각 속성의 디폴트값이 틀리기 때문에 모든 엘리먼트의 padding, margin, border을 0으로 초기화 하는 용도로 많이 사용됩니다.
타입 선택자 (type selector)
엘리먼트(body, p, h1, ol, li 등)를 선택자로 하는것을 말합니다.
다음과 같이 사용할 수 있습니다.
p {
font-size: 1em;
line-height: 1.2em;
}
하위 선택자 (descendant selector)
하위 선택자는 공백으로 분리된 두개 이상의 선택자들로 만들어집니다.
다음과 같이 사용할 수 있습니다. (depth에 상관없이 body안의 p태그는 모두 선택됩니다.)
<style type="text/css">
body p {
color: red;
}
</style>
<body>
<p> text 1</p>
<div>
<p> text 2 </p>
</div>
<p> text 3</p>
</body>
자식 선택자 (child selector)
자식 선택자는 ">"로 분리된 두개 이상의 선택자들로 만들어집니다.
다음과 같이 사용할 수 있습니다.(1depth아래의 자식들만 선택됩니다.)
<style type="text/css">
body > p {
color: red;
}
</style>
<body>
<p> text 1</p>
<div>
<p> text 2 </p> /* 선택되지 않습니다. */
</div>
<p> text 3</p>
</body>
인접 선택자 (sibling selector)
자식 선택자는 "+"로 분리된 두개 이상의 선택자들로 만들어집니다.
다음과 같이 사용할 수 있습니다. (div와 같은 depth이면서 div 바로 다음에 나오는 p가 선택됩니다.)
<style type="text/css">
div + p {
color: red;
}
</style>
<body>
<p> text 1</p>
<div>
<p> text 2 </p>
</div>
<p> text 3</p> /* text 3이 빨간색으로 출력됩니다. */
</body>
속성 선택자 (attribute selector)
속성 선택자는 네가지 방식으로 표현될 수 있습니다.
속성만 있는 경우
img[alt] { /* alt 속성을 가진 모든 이미지가 선택됩니다. */
border:1px solid red;
}
속성에 값을 지정할 경우
img[alt="dog"] { /* alt 속성값으로 dog가 지정된 모든 이미지가 선택됩니다. */
border: 1px solid red;
}
속성에 값이 표함될 경우
img[alt~="dog"] { /* alt 속성값으로 dog를 포함하는 모든 이미지가 선택됩니다. */
border:1px solid red;
}
속성 값으로 시작할 경우
img[alt|=cat] { /* alt 속성값으로 dog로 시작하는 모든 이미지가 선택됩니다. */
border:1px solid red;
}
클래스 선택자 (class selector)
클래스 선택자를 이용하면 특정 엘리먼트에만 스타일을 적용할 수 있습니다.
문서안에서 복수의 요소에 스타일을 적용합니다.
다음과 같이 사용할 수 있습니다.
p.summary { /* 클래스가 summary인 p태그 선택 */
color: gray;
}
.summary { /* 클래스가 summary인 모든 태그 선택 */
color: gray;
}
아이디 선택자 (id selector)
아이디 선택자를 이용하면 특정 엘리먼트에만 스타일을 적용할 수 있습니다.
문서안에서 유일한 요소에 스타일을 적용합니다.
다음과 같이 사용할 수 있습니다.
p#summary { /* 아이디가 summary인 p태그 선택 */
color: gray;
}
#summary { /* 아이디가 summary인 모든 태그 선택 */
color: gray;
}
가상 클래스 (pseudo-class)
가상 클래스는 스타일이 적용되는 대상이 요소나 속성, 속성값에 따라 분류되는게 아니라 "상황"에 따라 분류됩니다.
:first-child
다음 스타일에서 div의 첫번째 자식이 p 엘리먼트라면 div의 첫번째 문단 들여쓰기를 0으로 합니다.
DIV > P:first-child {
text-indent: 0;
}
다음을 보면 div의 첫번째 자식은 p엘리먼트가 되므로 첫번째 문단 들여쓰기를 0으로 합니다.
<p> The last p before the note.</p> <div class="note"> <p> The first p inside the note.</p> </div>
다음을 보면 div의 첫번째 자식이 p엘리먼트가 아니므로 스타일이 적용되지 않습니다.
<p> The last P before the note.</p> <div class="note"> <h2>Note</h2> <p> The first p inside the note.</p> </div>
:link
아직 방문한 적이 없는 링크에 적용됩니다.
다음과 같이 사용할 수 있습니다.
a:link {
color: red;
}
아래 링크가 방문한 적이 없는 링크라면 빨간색으로 출력됩니다.
<a href="http://opentutorials.org">CSS Dictionary</a>
:visited
방문한 적이 있는 링크에 적용됩니다.
다음과 같이 사용할 수 있습니다.
a:visited {
color: blue;
}
아래 링크가 방문한 적이 있는 링크라면 파란색으로 출력됩니다.
<a href="http://opentutorials.org">CSS Dictionary</a>
:hover
엘리먼트위에 마우스를 올려놓는 동안 적용됩니다.
다음과 같이 사용할 수 있습니다.
a:hover {
color: yellow;
}
아래 링크에 마우스를 올려놓는동안 링크가 노란색으로 출력됩니다.
<a href="http://opentutorials.org">CSS Dictionary</a>
:active
사용자가 마우스를 눌렀다 놓는 동안 적용됩니다.
다음과 같이 사용할 수 있습니다.
a:active {
color: lime;
}
아래 링크에 마우스를 클릭했다가 놓는 동안 링크가 라임색으로 출력됩니다.
<a href="http://opentutorials.org">CSS Dictionary</a>
:focus
텍스트 입력 양식에 마우스를 클릭하고 입력하는 동안 적용됩니다.
다음과 같이 사용할 수 있습니다.
input:focus {
border: 1px solid blue;
}
다음과 같이 가상클래스를 결합해서 사용할 수도 있습니다.
input:focus:hover {
border: 1px solid blue;
}
:lang
특정 언어코드가 지정된 요소에 스타일을 적용합니다.
html:lang(en) {
background: silver;
}
*:lang(fr) {
quotes: '<< ' ' >>';
}
가상 엘리먼트 (pseudo-element)
어떤 요소의 내용에 대해 XHTML에서는 최초의 줄이나 최초의 문자를 지정할 수 있는 방법이 없는데 가상 엘리먼트를 이용하여 그것에 스타일을 적용할 수 있습니다.
:first-line
문단에서 첫번째 양식화된 줄에 스타일을 적용합니다.
p:first-line {
text-transform: uppercase;
}
위 예제는 문단의 첫번째 라인을 대문자로 만들어 줍니다. 단 문단의 첫번째라인의 처음과 끝이 브라우저의 창크기가 폭이나 글꼴크기의 설정에 따라 달라질 수 있습니다.
:first-line는 블럭레벨 엘리먼트에만 적용되며, 다음 속성들만이 적용될 수 있습니다.
font 속성, color 속성, 배경 속성, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', 'clear'.
:first-letter
어떤 엘리먼트의 첫번째 문자에만 스타일을 적용한다. 이는 인쇄매체에서와 같이 "drop cap"이나 "initial cap"같은 효과를 나타내기 위해 사용됩니다.
다음과 같이 사용할 수 있습니다.
<HTML>
<HEAD>
<TITLE>Drop cap initial letter</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article
in The Economist.</P>
</BODY>
</HTML>
만약 첫번째 글자 앞에 인용부호나, 괄호등의 문자가 오면 그 문자를 포함한 첫번째 글자가 해당됩니다.
p {
color: black;
}
p:first-line {
color: blue;
}
p:first-letter {
color:red;
}
위의 예제에서과 같이 가상 요소사이에 충돌이 있을 수 있는데 이 경우는 :first-letter스타일이 우선시 됩니다.
:first-letter는 블럭레벨 엘리먼트에만 적용되며, 다음 속성들만이 적용될 수 있습니다.
font 속성, color 속성, 배경 속성, 'text-decoration', 'vertical-align'('float'가 'none'일 때 만), 'text-transform', 'line-height', 마진(margin) 속성, 패딩(padding) 속성, 테두리(border) 속성, 'float', 'text-shadow', 'clear'.
:before, :after
어떤 엘리먼트의 앞(before)과 뒤(after)에 내용을 삽입하기 위해 사용됩니다.
다음과 같이 사용될 수 있습니다.
p.special:before {
content: "Special! ";
}
p.special:first-letter {
color: #ffd800;
}
두 가상엘리먼트를 이용하여 다음과 같이 사용할 수 있습니다.
p.note:before {
content: "Note!"; /* 문단앞에 "Note!"라는 텍스트를 삽입합니다.
}
q엘리먼트에 앞뒤로 자동 인용부호를 삽입할 수 있습니다.
q:before {
content: """;
}
q:after {
content: """;
}
