Pseudo-class

| 2017. 11. 14. 05:20

◎ Pseudo-class

- pseudo: 가상, 가짜

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

- ex. style an element when a user mouse over it

- ex. style visited and unvisited link differently

- ex. style an element when it gets focus

- ex. a:link, a:visited, a:hover, a:active, input:focus etc

- simple tooltip hover

selector	example	description
:first-child	p:first-child	부모 요소 안에 있는 첫번째 자식 요소에 해당 IE8 and earlier: !DOCTYPE must be declared
:first-of-type	p:first-of-type	같은 유형의 첫번째 형제인 p 요소
:nth-child(n)	p:nth-child(2), p:nth-child(3n+2)	부모의 n번째 자식인 요소
:last-child	p:last-child	부모 요소 안에 있는 마지막 자식 요소에 해당
:nth-last-child(n)	p:nth-last-child(2)	부모 요소 안에 있는 마지막에서 n번째 자식 요소에 해당
:last-of-type	p:last-of-type	같은 유형의 마지막 형제인 p 요소
:nth-last-of-type(n)	p:nth-last-of-type(2)	같은 유형의 마지막에서 n번째 형제인 p 요소
:nth-of-type(n)	p:nth-of-type(2)	같은 유형의 n번째 형제인 p 요소
:only-of-type	p:only-of-type	같은 유형의 유일한 형제인 p 요소 (같은 유형의 형제가 없을 때 적용)
:only-child	p:only-child	부모의 유일한 자식인 p 요소

- :first-child ex1: any <p> element that is the first child of any element

- :first-child ex2: first <i> element in all <p> elements

- :only-of-type

- :only-child

selector	example	description
:checked	input:checked	selects every checked <input> element (선택된 input 요소에 스타일 지정) In HTML, checked="checked"
:disabled	input:disabled	selects every disabled <input> element In HTML, disabled="disabled"
:required	input:required	selects <input> element with a 'required' attribute specified
:optional	input:optional	폼 요소에서 'required' 속성을 가지지 않은 것을 'optional'이라고 하며 이 때의 스타일을 지정 즉 'required' 가 아닌 것의 스타일 지정
:valid	input:valid	type="email"의 경우 형식에 맞을 때 스타일 지정
:invalid	input:invalid	type="email"의 경우 형식에 맞지 않을 때 스타일 지정
:in-range	input:in-range	selects <input> elements with a value within a specified range type="range" 에서 지정한 min~max 사이의 값인 경우에 스타일 지정 IE X
:out-of-range	input:out-of-range	type="email"에서 지정한 min~max 사이의 값이 아닌 경우에 스타일 지정
:read-only	input:read-only	selects <input> element with a 'readonly' attribute specified
:read-write	input:read-write	selects <input> element with no 'readonly' attribute specified

- :disabled

selector	example	description
:empty	p:empty	selects every <p> element that no children ex. <p></p>
:not(selector)	:not(p)	p 요소를 제외한 다른 모든 요소의 스타일 지정
:root	:root	selects the document's root element (<html>)
:lang(language)	A:lang(B)	요소 A에 표현되는 텍스트의 언어 B에 따른 스타일 지정 언어별로 다른 스타일을 지정하고자 할 때 사용
:target	#news1:target (chapter 'Link' more info in 'HTML')	Bookmark 기능에서 현재 target인 요소에 스타일 지정

- :lang(language)

UBANGE