:link CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 <a>, <area>, <link> 중 방문하지 않은 모든 요소를 선택합니다.

/* 아직 방문하지 않은 <a> 요소를 선택 */
a:link {
  color: red;
}

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

참고: 방문 여부에 상관하지 않고 요소를 선택하려면 :any-link를 사용하세요.

구문

:link

예제

대부분의 브라우저는 방문한 링크에 기본값으로 특별한 color 값을 지정합니다. 따라서 다음 예제의 링크를 방문한 적이 없을 때만 글자 색이 적용된 모습을 볼 수 있고, 방문한 적이 있으면 브라우저 기록을 지워서 확인할 수 있습니다. 그러나 방문한 링크의 배경색은 보통 브라우저가 지정하지 않으므로 background-color는 계속 확인할 수 있습니다.

HTML

<a href="#ordinary-target">평범한 링크입니다.</a><br>
<a href="">이 링크는 이미 방문했습니다.</a><br>
<a>플레이스홀더 링크 (스타일 적용 안됨)</a>

CSS

a:link {
  background-color: gold;
  color: green;
}

결과

명세

Specification Status Comment
HTML Living Standard
The definition of ':link' in that specification.
Living Standard  
Selectors Level 4
The definition of ':link' in that specification.
Working Draft No change.
Selectors Level 3
The definition of ':link' in that specification.
Recommendation No change.
CSS Level 2 (Revision 1)
The definition of ':link' in that specification.
Recommendation Lift the restriction to only apply it for <a> element.
CSS Level 1
The definition of ':link' in that specification.
Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:linkChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1.5Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS Full support 3.2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta
최종 변경자: alattalatta,