CSS :active 의사 클래스

정의와 사용법

CSS :active 퍼클래스는 사용자가 활성화 중인 요소의 스타일을 선택하고 설정하는 데 사용됩니다.

:active 퍼클래스는 대부분 사용됩니다 <a> 와 <button> 요소. 사용자가 링크를 클릭할 때 링크가 활성화되며, 버튼도 마찬가지입니다.

ヒント:사용하십시오 :link 비방문 페이지의 링크 스타일을 설정하려면 :visited 방문한 페이지의 링크 스타일을 설정하려면 :hover 마우스 오버 시 링크 스타일을 설정하십시오.

주의:CSS 정의에서는:active 반드시 :hover존재하면, 이후로 효과가 발생합니다!

예제

예제 1

활성화된 링크의 스타일을 선택하고 설정하십시오:

a:active {
  background-color: yellow;
}

직접 시도해 보세요

예제 2

사용자가 클릭할 때 <button> 스타일을 선택하고 설정하십시오:

button:active {
  background-color: pink;
}

직접 시도해 보세요

예제 3

비활성화된 <p>、<h1> 및 <a> 요소의 스타일을 선택하고 설정하십시오:

p:active, h1:active, a:active {
  background-color: yellow;
}

직접 시도해 보세요

예제 4

비활성화된, 방문한, 오버와 활성화된 링크의 스타일을 선택하고 설정하십시오:

/* 방문하지 않은 링크 */
a:link {
  color: green;
}
/* 방문한 링크 */
a:visited {
  color: green;
}
/* 마우스 오버 링크 */
a:hover {
  color: red;
}
/* 활성화된 링크 */
a:active {
  color: yellow;
}

직접 시도해 보세요

예제 5

링크에 다른 스타일을 설정하십시오:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

직접 시도해 보세요

CSS 문법

:active {
  css 선언;
}

기술 세부 사항

브라우저 지원

표 안의 숫자는 이 퍼클래스를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

관련 페이지

튜토리얼:CSS 링크

튜토리얼:CSS 버튼

튜토리얼:CSS 퍼클래스