CSS Pseudo-classes

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently
• Style an element when it gets focus

pseudo-classes 란 무엇일까?

수도 클래스는 요소의 특별한 상태를 정의하기 위해 사용되어진다.

예를들면, 이것은 아래와 같이 사용되어질 수 있다.

1. 유저가 요소의에 마우스를 올렷을때, 스타일 변경

2. 방문했거나, 방문하지 않은 링크를 다르게 스타일할때,

이것의 집중되었을때의 스타일 변경

 

Anchor Pseudo-classes

Links can be displayed in different ways:

 

링크는 다른 방식으로 표현되어질 수 있다.

 

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective! Pseudo-class names are not case-sensitive.

 

주의 : css 정의에서 효과를 나타내기 위해선 a:hover 는 a:link 와 a:visited 다음에 와야만한다.

a:active는 a:hover 다음에 와야만 한다. 수도클래스 이름은 대소문자를 구별하지 않는다.

 

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

When you hover over the link in the example, it will change color:

 

수도 클래스와 css 클래스

수도 클래스는 css 클래스와 결합되어질수 있다.

예제안에서 링크 위에 마우스를 올려놨을때, 이것은 색을 변화시킬수 있다.

 

 

CSS - The :first-child Pseudo-class

The :first-child pseudo-class matches a specified element that is the first child of another element.

 

first-child 수도 클래스는 다른 요소의 첫번째 아이요소와 매칭된다.

Match the first <p> element

In the following example, the selector matches any <p> element that is the first child of any element:

다음의 예제에서 셀렉터는 다른요소의 첫번째 <p>요소와 매칭된다.

 

Match the first <i> element in all <p> elements

In the following example, the selector matches the first <i> element in all <p> elements:

 

모든 <p> 요소에서의 첫번째 <i> 요소와 매칭

다음의 예제에서 셀렉터는 모든 <p>요소안에서 처음 <i>와 매칭한다.

 

Match all <i> elements in all first child <p> elements

In the following example, the selector matches all <i> elements in <p> elements that are the first child of another element:

 

<p> 요소의 모든 첫 번째 아이요소의 <i>와 매칭

다음의 예제에서 셀렉터는 다른 요소의 첫번째의 <p> 요소의 모든 <i> 요소와 매칭한다.

 

CSS - The :lang Pseudo-class

The :lang pseudo-class allows you to define special rules for different languages.

In the example below, :lang defines the quotation marks for <q> elements with lang="no":

 

lang 수도 클래스

lang 수도 클래스는 다른 언어를 위해 특별한 규칙을 정하기 위해 허용한다.

아래의 예제에서 lang 은 lang="no" 처럼 정의한다,.?