의사 클래스
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-link(en-US) Experimental:blank(en-US) Experimental:checked:current(en-US) Experimental:default:defined:dir()(en-US) Experimental:disabled:dropExperimental:empty(en-US):enabled:first:first-child:first-of-type:fullscreenExperimental:future(en-US) Experimental:focus:focus-visible(en-US) Experimental:focus-within:has()(en-US) Experimental:host(en-US):host()(en-US):host-context()(en-US) Experimental:hover:indeterminate(en-US):in-range(en-US):invalid(en-US):is()(en-US) Experimental:lang()(en-US):last-child:last-of-type(en-US):left(en-US):link:local-link(en-US) Experimental:not():nth-child():nth-col()(en-US) Experimental:nth-last-child()(en-US):nth-last-col()(en-US) Experimental:nth-last-of-type()(en-US):nth-of-type()(en-US):only-child(en-US):only-of-type(en-US):optional(en-US):out-of-range(en-US):past(en-US) Experimental:placeholder-shownExperimental:read-only(en-US):read-write(en-US):required(en-US):right(en-US):root:scope(en-US):state()(en-US) Experimental:target(en-US):target-within(en-US) Experimental:user-invalid(en-US) Experimental:valid(en-US):visited:where()(en-US) Experimental
명세
| Specification |
|---|
| HTML Standard # pseudo-classes |
| Selectors Level 4 |
| CSS Basic User Interface Module Level 4 |