CSS pseudo-class 는 선택될 요소(element)의 특별한 상태를 지정하는 선택자(selector)에 추가된 키워드입니다. 예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용합니다.
가상 클래스(pseudo-class)는, 가상 요소(pseudo-elements)와 함께, 문서 트리의 콘텐츠 뿐만 아니라, 탐색기 히스토리 (가령, :visited), 콘텐츠 상태(일부 폼 요소의 :checked 같은) 혹은 마우스 위치 (마우스가 요소 위인지 알 수 있는 :hover 같이)처럼 외부 요인(factor) 관련 요소에 스타일을 적용할 수 있습니다.
구문
selector:pseudo-class {
property: value;
}
표준 가상 클래스 색인
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
스펙
| 스펙 | 상태 | 설명 |
|---|---|---|
| Fullscreen API | Living Standard | :fullscreen 정의됨. |
| WHATWG HTML Living Standard | Living Standard | HTML5에서 변화 없음. |
| Selectors Level 4 | Working Draft | :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() 및 :matches() 정의됨.Selectors Level 3 및 HTML5에 정의된 가상 클래스에서 두드러진 변화 없음 (비록 semantic 의미를 인계받지 않았지만). |
| HTML5 | Recommendation | HTML 문맥에서 :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate의 semantic 의미가 정의됨.:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write 및 :dir() 정의됨. |
| CSS Basic User Interface Module Level 3 | Candidate Recommendation | :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only 및 :read-write 정의됨 하지만 관련 semantic 의미 없이. |
| Selectors Level 3 | Recommendation | :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty 및 :not() 정의됨.:enabled, :disabled, :checked 및 :indeterminate 의 구문 정의됨 하지만 관련 semantic 의미 없이.CSS Level 2 (Revision 1)에 정의된 가상 클래스에서 두드러진 변화 없음. |
| CSS Level 2 (Revision 1) | Recommendation | :lang(), :first-child, :hover 및 :focus 정의됨.CSS Level 1에 정의된 가상 클래스에서 두드러진 변화 없음. |
| CSS Level 1 | Recommendation | :link, :visited, and :active 정의됨 하지만 관련 semantic 의미 없이. |