가상 클래스(Pseudo classes, 쑤도우 클래스, 의사 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.

예를 들어,

• 사용자 마우스가 올려졌을 때 요소를 스타일링 하는 것
• 방문(visited) 및 미방문(unvisited) 링크를 다르게 스타일링 하는 것
• 포커스(focus)를 받을 때 요소를 스타일링 하는 것

에 사용할 수 있습니다.

가상 클래스의 구문은 하기와 같습니다.

링크는 다양한 방식으로 표시됩니다.

CSS Links

This is a link 02

Note: a:hover come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST cone after a:hover in the CSS definition in order to be effective.

Note:
a:hover는 CSS 정의에서 a:link 및 a:visited 뒤에 와야 효과적입니다.
a:active는 CSS 정의에서 a:hover 뒤에 와야 효과적입니다.
가상 클래스 이름은 대소문자를 구분하지 않습니다.

가상 클래스는 CSS 클래스와 결합될 수 있습니다.

예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.

Pseudo-clsses and CSS Classes

When you hover over the first link below, it will change color:

CSS Syntax

CSS Tutorial

다음은 <div> 요소 위의 :hover 가상 클래스를 사용하느 예제입니다.

Mouse over the div element below to change its background color:

<hover> 요소 위에 마우스를 가져가면 툴팁(tooltip) 처럼 <p> 요소를 나타냅니다.

first-child 가상 클래스는 다른 요소의 첫 번째 자식인 지정 요소와 일치합니다.

하기 예제에서 셀텍터(selector)는 요소의 첫 번째 하위 요소인 <p> 요소와 일치합니다.

This is some text.

This is some text.

하기 예제에서 셀렉터(selector)는 모든 <p> 요소의 첫 번째 <i> 요소와 일치합니다.

I am a strong person. I am a strong person

I am a strong person. I am a strong person

다음 예제에서, 셀렉터(selector)는 다른 요소의 첫 번째 자식인 <p> 요소의 모든 <i> 요소와 일치합니다:

I am a strong person. I am a strong person

I am a strong person. I am a strong person