:link - CSS: Cascading Style Sheets

: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.

브라우저 호환성

BCD tables only load in the browser

같이 보기

링크 관련 의사 클래스: :visited, :hover, :active