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

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

selector:pseudo-class { property: value; }

Anchor Pseudo-classes (가상 클래스 고정하기)

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

예제

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 뒤에 와야 효과적입니다.
가상 클래스 이름은 대소문자를 구분하지 않습니다.

Pseudo-classes and CSS Classes

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

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

예제

Pseudo-clsses and CSS Classes

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

CSS Syntax

CSS Tutorial

Hover on <div>

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

예제

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

Mouse Over Me

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

예제

Hover over me to show the p element

Tada! Here I am!

CSS - The :first-child Pseudo-class

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

Match the first element

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

예제

This is some text.

Match the first element in all elements

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

예제

I am a strong person. I am a strong person

Match all elements in all first child elements

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

예제

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	방문한 모든 링크를 선택합니다.

오션, CSS, Pseudo-classes

목차