CSS의 :link 선택자는 아직 방문하지 않은 모든 하이퍼링크에 스타일을 적용할 때 사용하는 의사 클래스(pseudo-class)입니다. 사용자가 해당 링크를 클릭하여 페이지를 방문하면 더 이상 이 선택자가 적용되지 않으며, 그 시점부터는 :visited 선택자의 스타일이 대신 적용됩니다.
:link 선택자의 특징
:link 선택자는 href 속성을 가진 앵커(<a>) 태그 중에서 아직 열어보지 않은 링크만 대상으로 합니다. 일반적으로 :visited, :hover, :active 선택자와 함께 사용하여 링크의 상태별로 다른 스타일을 구현하는 데 활용됩니다.
예제 코드
다음 예제에서는 a:link 선택자를 사용해 방문하지 않은 링크의 배경색을 주황색(orange)으로 지정했습니다. 아래 코드를 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: orange;
}
</style>
</head>
<body>
<a href="https://www.example.com">Demo Website</a>https://www.example.com/
</body>
</html>실행 결과 및 활용 팁
위 코드를 실행하면 'Demo Website'라는 텍스트가 포함된 링크가 주황색 배경으로 표시됩니다. 해당 링크를 클릭해 한 번 방문한 후에는 배경색이 사라지는 것을 확인할 수 있습니다.
실무에서는 링크 상태를 정의할 때 LVHA 순서(:link → :visited → :hover → :active)로 작성하는 것이 권장됩니다. 이 순서를 지켜야 각 상태의 스타일이 서로 덮어쓰이지 않고 의도대로 동작합니다.