의사 클래스

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리(:visited 등), 콘텐츠의 상태(특정 폼 요소에 적용한 :checked 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 :hover 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.

참고: 의사 요소는 의사 클래스와 달리 요소의 특정 부분에 스타일을 적용할 때 사용합니다.

구문

selector:pseudo-class {
  property: value;
}

일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.

표준 의사 클래스 색인

명세

명세 상태 설명
Fullscreen API Living Standard :fullscreen 정의됨.
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 3HTML5에 정의된 가상 클래스에서 두드러진 변화 없음 (비록 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 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 의미 없이.

같이 보기