CSS Pseudo-classes

W3C/CSS 2006. 9. 11. 18:34
CSS pseudo-classes는 어떤 선택자에 특별한 효과를 더하는데 사용된다.

Syntax
selector:pseudo-class {property: value}
또한 CSS classes는 psudo-classes로 사용될 수 있다.
selector.class:pseudo-class {property: value}


Anchor Pseudo-classes
링크에 마우스를 올렸을 때나, 활성화된, 방문한, 방문하지 않은 링크는 CSS를 지원하는 브라우저에 모두 다른방법으로 보여지게 될 수 있다.

a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

a:hover는 효과를 내려면 CSS 정의에서 a:link와 a:visited 후에 와야 한다.
a:active는 효과를 내려면 CSS 정의에서 a:over 후에 와야 한다.
Pseudo-class는 이름에서 대문자와 소문자를 구별한다.

<!-- Link 스타일 지정 -->
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
.
<!-- Link 스타일 지정 -->
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p><b><a class="one" href="default.asp" target="_blank">changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">changes text-decoration</a></b></p>
</body>
</html>


Pseudo-classes and CSS Classes
Pseudo-classes는 CSS 클래스들을 결합시킬 수 있다.

a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>


CSS2 - The :first-child Pseudo-class
The :first-child pseudo-class는 또 다른 요소의 첫번째 자식(child)인 지정된 요소를 맞춘다.
(ie 에서 동작하지 않음)

/* 선택자가 div 요소의 첫번째 자식(child)인 p 요소에 맞추고, div 요소 안에 첫번째 문단을 들여쓴다. */
div > p:first-child
{
text-indent:25px
}

/* 이 선택자는 div 안에 첫번째 문단에 맞춰질 것이다. */
<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>

/* 그러나 다음 문장은 맞춰지지 않는다. */
<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>

/* 선택자는 p 요소의 첫번째 자식(child)인 em 요소에 맞추고, p 요소 안의 첫번째 em에 굵게 font-weight를 지정한다. */
p:first-child em
{
font-weight:bold
}

/* 아래 em은 문장의 첫번째 자식(child)이다. */
<p>I am a <em>strong</em> man.</p>

/* 선택자는 어떤 요소의 첫번째 자식(child)인 요소에 맞추고, none으로 text-decoration을 지정한다. */
a:first-child
{
text-decoration:none
}

/* 아래에서 첫번째는 문단의 첫번째 자식(child)이고, 라인이 생기지 않을 것이다.
그러나 문장의 두번째는 누장의 첫번째 자식과 달리 라인이 생길 것이다. */
<p>
Visit <a href="http://www.google.co.kr">Google</a>
Google
Visit <a href="http://www.google.co.kr">Google</a>
Google
</p>


CSS2 - The :lang Pseudo-class
The :lang pseudo-class는 다른 언어에 대한 특정할 규칙을 정의한다.
(ie 에서 동작하지 않음)

/* the :lang class는 "no" 값을 가진 lang 속성으로 인용부호의 타입을 정의한다. */
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>


Pseudo-classes

:active - 선택된 링크에 지정된 스타일 중
:focus - 요소가 포커스를 가지는 동안 요소에 특별한 효과를 줌
:hover - 마우스를 올렸을 때 요소에 특별한 스타일을 추가
:link - 방문하지 않은 링크에 특별한 스타일을 추가
:visited - 방문한 링크에 특별한 스타일을 추가
:first-child - 다른 요소의 첫번째 자식 요소에 특별한 스타일을 추가 (ie : x)
:lang - 지정된 요소에 사용할 특별한 언어를 지정 (ie : x)

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

트랙백  0 , 댓글  0개가 달렸습니다.
secret