목차
CSS Pseudo-classes
- description : CSS Pseudo-classes
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-29
What are Pseudo-classes?
가상 클래스(Pseudo classes, 쑤도우 클래스, 의사 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.
예를 들어,
- 사용자 마우스가 올려졌을 때 요소를 스타일링 하는 것
- 방문(visited) 및 미방문(unvisited) 링크를 다르게 스타일링 하는 것
- 포커스(focus)를 받을 때 요소를 스타일링 하는 것
에 사용할 수 있습니다.
Syntax
가상 클래스의 구문은 하기와 같습니다.
Anchor Pseudo-classes (가상 클래스 고정하기)
링크는 다양한 방식으로 표시됩니다.
예제
CSS Links
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 뒤에 와야 효과적입니다.
가상 클래스 이름은 대소문자를 구분하지 않습니다.
Pseudo-classes and CSS Classes
가상 클래스는 CSS 클래스와 결합될 수 있습니다.
예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.
예제
Pseudo-clsses and CSS Classes
When you hover over the first link below, it will change color:
Hover on <div>
다음은 <div> 요소 위의 :hover 가상 클래스를 사용하느 예제입니다.
예제
Mouse over the div element below to change its background color:
Simple Tooltip Hover
<hover> 요소 위에 마우스를 가져가면 툴팁(tooltip) 처럼 <p> 요소를 나타냅니다.
예제
Tada! Here I am!
CSS - The :first-child Pseudo-class
first-child 가상 클래스는 다른 요소의 첫 번째 자식인 지정 요소와 일치합니다.
Match the first <p> element
하기 예제에서 셀텍터(selector)는 요소의 첫 번째 하위 요소인 <p> 요소와 일치합니다.
예제
This is some text.
This is some text.
Match the first <i> element in all <p> elements
하기 예제에서 셀렉터(selector)는 모든 <p> 요소의 첫 번째 <i> 요소와 일치합니다.
예제
I am a strong person. I am a strong person
I am a strong person. I am a strong person
Match all <i> elements in all first child <p> elements
다음 예제에서, 셀렉터(selector)는 다른 요소의 첫 번째 자식인 <p> 요소의 모든 <i> 요소와 일치합니다:
예제
I am a strong person. I am a strong person
I am a strong person. I am a strong person
CSS - The :lang Pseudo-class
:lang가상 클래스를 사용하면 다른 언어에 대한 특수 규칙을 정의할 수 있습니다.
하기 예제에서 :lang은 lang = “no”로 <q> 요소에 대한 따옴표(quotation marks)를 정의합니다.
예제
Some text A quote in a paragraph
Some text.
In this exmaple, ;lang defines the quotation marks for q elements with lang="no":
쌍따옴표가 물결표시(~)로 변합니다.
All CSS Pseudo Classes
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | 활성 링크를 선택합니다. |
| :checked | input:checked | 선택된 모든 <input> 요소를 선택합니다 |
| :disabled | input:disabled | 비활성화된 모든 <input> 요소를 선택합니다. |
| :empty | p:empty | 자식이 없는 모든 <p> 요소를 선택합니다. |
| :enabled | input:enabled | 활성화된 모든 <input> 요소를 선택합니다. |
| :first-child | p:first-child | 부모의 첫 번째 자식인 모든 <p> 요소를 선택합니다. |
| :first-of-type | p:first-of-type | 부모의 첫 번째 <p> 요소인 모든 <p> 요소를 선택합니다. |
| :foucs | input:focus | 포커스가 있는 <input> 요소를 선택합니다. |
| :hover | a:hover | 마우스 오버 시 링크를 선택합니다. |
| :in-range | input:in-range | 지정된 범위 내의 값을 가진 <input> 요소를 선택합니다. |
| :invalid | input:invalid | 유효하지 않은 값을 가진 모든 <input> 요소를 선택합니다. |
| :lang(language) | p:lang(it) | “it”로 시작하는 lang 속성 값을 가진 모든 <p> 요소를 선택합니다. |
| :last-child | p:last-child | 부모의 마지막 자식인 모든 <p> 요소를 선택합니다. |
| :last-of-type | p:last-of-type | 부모의 마직막 <p> 요소인 모든 <p> 요소를 선택합니다. |
| :link | a:link | 방문하지 않은 모든 링크를 선택합니다. |
| :not(selected) | :not(p) | <p> 요소가 아니 모든 요소를 선택합니다. |
| :nth-child(n) | p:nth-child(2) | 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다. |
| :nth-last-child(n) | p:nth-last-child(2) | 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든 <p> 요소를 선택합니다. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 마지막 자식부터 계산하여, 부모의 두 번째 <p>요소인 모든 <p> 요소를 선택합니다. |
| :nth-of-type(n) | p:nth-of-type(2) | 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택합니다. |
| :only-of-type | p:only-of-type | 부모의 유일한 <p> 요소인 모든 <p> 요소를 선택합니다. |
| :only-child | p:only-child | 부모의 유일한 자식인 모든 <p> 요소를 선택합니다. |
| :optional | input:optional | 필요 속성이 없는 <input> 요소를 선택합니다. |
| :out-of-range | input:out-of-range | 지정 범위를 벗어난 값을 가진 <input> 요소를 선택합니다. |
| :read-only | input:read-only | “readonly” 속성이 지정된 <input> 요소를 선택합니다. |
| :read-write | input:read-write | “readonly” 속성이 없는 <input> 요소를 선택합니다. |
| :required | :input:required | “required(필수)” 속성이 지정된 <input> 요소를 선택합니다. |
| :root | root | 문서의 root 요소를 선택합니다. |
| :target | #news:target | 현재 활성화된 #news 요소를 선택합니다(해당 앵커 이름이 포함된 URL이 클릭된) |
| :valid | input:valid | 유효 값을 가진 모든 <input> 요소를 선택합니다. |
| :visited | a:visited | 방문한 모든 링크를 선택합니다. |
