의사 클래스
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.
css
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리(:visited 등), 콘텐츠의 상태(특정 폼 요소에 적용한 :checked 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 :hover 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.
참고: 의사 요소는 의사 클래스와 달리 요소의 특정 부분에 스타일을 적용할 때 사용합니다.
구문
selector:pseudo-class {
property: value;
}
일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.
표준 의사 클래스 색인
:active:any-linkExperimental:blankExperimental:checked:currentExperimental:default:defined:dir()Experimental:disabled:dropExperimental:empty:enabled:first:first-child:first-of-type:fullscreenExperimental:futureExperimental:focus:focus-visibleExperimental:focus-within:has()Experimental:host:host():host-context()Experimental:hover:indeterminate:in-range:invalid:is()Experimental:lang():last-child:last-of-type:left:link:local-linkExperimental:not():nth-child():nth-col()Experimental:nth-last-child():nth-last-col()Experimental:nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:pastExperimental:placeholder-shownExperimental:read-only:read-write:required:right:root:scope:state()Experimental:target:target-withinExperimental:user-invalidExperimental:valid:visited:where()Experimental
명세
| Specification |
|---|
| HTML # pseudo-classes |
| Selectors Level 4 |
| CSS Scoping Module Level 1 |
| CSS Paged Media Module Level 3 |