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" 처럼 정의한다,.?