MDN은 현재 보수 작업 중으로 읽기-전용으로만 사용하실 수 있습니다. 더 알아보기.

:active CSS 가상 클래스(pseudo-class)는 사용자에 의해 활성화되어있는 요소를 나타냅니다. 마우스를 사용하는 경우에는 일반적으로 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다. 일반적으로 <a>와 <button>에 사용되지만, 다른 요소에도 사용될 수 있습니다.

/* a 요소가 활성화되어 있을 때, a를 선택(예를 들어, 클릭됐을 때)  */
a:active {
  color: red;
}

:active 가상 클래스로 정의된 스타일은 적어도 하나의 동등한 특수성을 갖는 일련의 후속 링크 가상 클래스 (:link, :hover, 또는 :visited)에 의해 재정의됩니다. 링크를 적절히 디자인하기 위해서, LVHA-순서(:link — :visited — :hover — :active.)에 따라서 :active 규칙을 다른 모든 링크 규칙들보다 뒤에 놓습니다. 

노트: 다중 버튼 마우스 시스템에서, CSS3는 :active 가상 클래스는 오직 주 버튼에 적용하도록 구현하였습니다. 이는 일반적으로 왼쪽 주버튼입니다.

Syntax

:active

Example

HTML

<a href="#">이 링크를 클릭하는 동안 이것은 라임색으로 변할 것입니다.</a>

CSS

a:link { color: blue } /* 방문하지 않은 링크들 */
a:visited { color: purple } /* 방문한 링크들 */
a:hover { font-weight: bold } /* 사용자 호버(hover) 상태 */
a:active { color: lime } /* 링크를 활성화(active) */

Result

 

Specifications

Specification Status Comment
HTML Living Standard
The definition of ':active' in that specification.
Living Standard  
Selectors Level 4
The definition of ':active' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':active' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of ':active' in that specification.
Recommendation No change.
CSS Level 1
The definition of ':active' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 4.0 5.0 1.0
Support on non-<a> elements 1.0 (Yes) 1.0 (1.7 or earlier) 8.0 7.0 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 (Yes) 1.0 (1.0) 6.0 6.0 1.0
Support on non-<a> elements 1.0 (Yes) 1.0 (1.0) ? ? (Yes) [1]

[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.

See also

문서 태그 및 공헌자

 최종 변경: chatii2412,