CSS Pseudo-classes

« Previous Next Chapter »

CSS pseudo-classes 는 요소의 특별한 상태를 지정하는데 사용됩니다.

예를 들면, 다음과 같은 경우에 사용될 수 있습니다:

요소의 위에 마우스가 있을 때의 스타일
방문되었던 것과 방문된 적이 없던 링크를 다르게 스타일
요소가 선택되었을(get focus) 때의 스타일

Mouse Over Me

pseudo-classes 문법

pseudo-classes 문법:

selector:pseudo-class {
property:value;
}

Anchor Pseudo-classes

Links 는 CSS 가 지원되는 브라우져에서 다른 방법들로 표시될 수 있다.:

Example

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

Try it yourself »

	Note: a:hover 는 CSS 정의에서 a:link 및 a:visited 뒤에 와야 동작합니다! a:active는 CSS 정의에서 a:hover 뒤에 와야 동작합니다! 의사 클래스 이름은 대소문자를 구분하지 않습니다.

Pseudo-classes 와 CSS Classes

Pseudo-classes 는 CSS classes 와 결합되어 사용될 수 있다.:

다음의 예에서 링크에 hover 하면, red 로 표시될 것이다.

Example

a.highlight:hover {
color: #ff0000;
}

Try it yourself »

Hover on <div>

<div>요소에서 : :hover 의사 클래스를 사용하는 예 :

Example

div:hover {
background-color: blue;
}

Try it Yourself »

Simple Tooltip Hover

<div> 요소 위로 마우스를 가져 가면 툴팁과 같은<p> 요소가 표시됩니다.

Example

p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}

Try it Yourself »

CSS - :first-child Pseudo-class

:first-child pseudo-class 는 또 다른 요소에 대하여 첫번째 자식인 요소를 지정하는데 사용된다.

첫번째 <p> 요소 선택

다음 예에서, selector 는 어떤 요소이던 간에 그 요소의 첫번째 자식에 해당되는 <p> 요소를 지정한다.:

Example

p:first-child {
color: blue;
}

Try it yourself »

모든 <p> 요소에서 첫번째 <i> 요소 선택

다음 예에서, selector 는 모든 <p> 요소의 첫번째 <i> 요소를 지정한다.

Example

p i:first-child {
color: blue;
}

Try it yourself »

모든 첫번째 자녀 <p> 요소들 중에서 모든 <i> 요소들 선택

다음 예에서, selector 는 어떤 요소의 첫번째 자식에 해당되는 <p> 요소의 안에 있는 <i> 요소를 지정한다. :

Example

p:first-child i {
color: blue;
}

Try it yourself »

CSS - :lang Pseudo-class

:lang pseudo-class 서로 다른 언어에 대하여 특별한 규칙을 정의하는데 사용된다..

다음 예에서, :lang class 는 lang="no" 를 가지는 q 요소에 대한 인용부호를 정의 한다. :

Example

<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>

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

Try it yourself »

More Examples

Add different styles to hyperlinks
This example demonstrates how to add other styles to hyperlinks.

Use of :focus
This example demonstrates how to use the :focus pseudo-class.

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

All CSS Pseudo Classes

Selector	Example	Example description
:active	a:active	Selects the active link
:checked	input:checked	Selects every checked <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the <input> element that has focus
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects <input> elements with a value within a specified range
:invalid	input:invalid	Selects all <input> elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"
:last-child	p:last-child	Selects every <p> elements that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects <input> elements with no "required" attribute
:out-of-range	input:out-of-range	Selects <input> elements with a value outside a specified range
:read-only	input:read-only	Selects <input> elements with a "readonly" attribute specified
:read-write	input:read-write	Selects <input> elements with no "readonly" attribute
:required	input:required	Selects <input> elements with a "required" attribute specified
:root	root	Selects the document's root element
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all <input> elements with a valid value
:visited	a:visited	Selects all visited links

« Previous Next Chapter »