CSS : 활성 선택기
예시
활성 링크 선택 및 스타일 지정:
a:active
{
background-color: yellow;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
:active
선택기는 활성 링크를 선택하고 스타일을 지정하는 데 사용됩니다 .
링크를 클릭하면 링크가 활성화됩니다.
팁: :active 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.
팁: 방문하지 않은 페이지에 대한 링크 스타일을 지정하려면 :link 선택기를 사용하고, 방문한 페이지에 대한 링크의 스타일을 지정하려면 :visited 선택기를 사용하고, 링크 위에 마우스를 놓을 때 :hover 선택기를 사용하여 링크의 스타일을 지정합니다.
참고: :active가 효과를 나타내려면 CSS 정의에서 :hover(있는 경우) 뒤에 와야 합니다(MUST)!
버전: | CSS1 |
---|
브라우저 지원
표의 숫자는 선택기를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Selector | |||||
---|---|---|---|---|---|
:active | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
CSS 구문
:active {
css declarations;
}
더 많은 예
예시
클릭할 때 <p>, <h1> 및 <a> 요소를 선택하고 스타일을 지정합니다.
p:active, h1:active, a:active {
background-color: yellow;
}
예시
방문하지 않은 링크, 방문한 링크, 호버 링크 및 활성 링크를 선택하고 스타일을 지정합니다.
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
예시
다양한 스타일의 스타일 링크:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
관련 페이지
CSS 튜토리얼: CSS 링크
CSS 튜토리얼: CSS 의사 클래스