:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.

:visitedCSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다.:visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.

css

/* 방문한 적이 있는 <a> 선택 */a:visited {  color: green;}

:visited 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link,:hover,:active)가 덮어씁니다. 링크를 적절히 디자인하려면LVHA-순서(:link —:visited —:hover —:active)를 따라,:visited 규칙을:link 뒤,:hover와:active 앞에 배치하세요.

스타일 제한

브라우저는 개인정보 보호를 위해:visited에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.

사용 가능한 CSS 속성은color,background-color,border-color,border-bottom-color,border-left-color,border-right-color,border-top-color,column-rule-color,outline-color입니다.
사용 가능한 SVG 속성은fill과stroke입니다.
허용 가능한 속성의 알파 채널 값은 무시하고, 대신:visited가 아닐 때의 알파 채널을 사용합니다. 단, 그 값이 0일 땐:visited의 스타일을 모두 무시합니다.
사용자 입장에서는 방문한 링크의 색이 바뀐 것처럼 보일 때도,window.getComputedStyle() 메서드는 거짓으로라도 항상:visited가 아닐 때의 스타일을 반환합니다.

참고 :스타일 제한에 관한 더 많은 정보와 이유에 대해서는개인정보와 :visited 선택자 문서를 참고하세요.

<a href="#test-visited-link">링크를 아직 방문하지 않으셨나요?</a><br /><a href="">이미 방문했습니다.</a>

CSS

css

a {  /* 특정 속성에 투명하지 않은 기본값을 지정해     :visited 상태로 바꿀 수 있도록 설정 */  background-color: white;  border: 1px solid white;}a:visited {  background-color: yellow;  border-color: hotpink;  color: hotpink;}