[selector] CSS - :visited 가상선택자 ★ -이미 방문한 링크 선택 (= 읽은글/방문글/확인글 표시 = 비지티드선택자, 링크선택자) ※비지티드 ※ 이미 읽은 게시글 표시

목차

1. :visited 예제 - 이미 방문한 링크 선택
2. :visited 정의
3. :visited 예제 - 일반적인 위치
4. :visited 예제 - 다양한 결합 방법

 

:visited 예제 - 이미 방문한 링크 선택 

 

<style>

a:link {color: blue; text-decoration: none;}

a:visited {color: silver; text-decoration: none;}

</style>

<a href="#">홈짱닷컴</a> 

결과 보기 

링크 클릭 전엔 a:link 스타일 영향 받아 파란색이다가, 
클릭 이후엔 a:visited 스타일 영향으로 회색으로 변함.

:visited 정의

 

이미 방문한 링크를 선택해 스타일 줄 때 사용

 

---

 

1.

캐시 새로고침 된 경우, 다시 원래 색상으로 적용됨.

너무 옅은 색으로 할 경우, 제목 확인 힘드니 주의 !!

한번 읽은 글 다시 안 읽는 경향 있으니 사용 시 주의 !!

 

2.

모든 브라우저 지원.

 

3. MDN :visited 예제 보기

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited

 

:visited 예제 - 일반적인 위치

<style>

a:visited {color: silver; text-decoration: none;}

a:link {color: blue; text-decoration: none;}

</style>

<a href="#">홈짱닷컴</a>

결과 보기

 

:visited 예제 - 다양한 결합 방법

id="hz"인 요소

 

<style>

#hz:link {color: blue; text-decoration: none;}

#hz:visited {color: silver; text-decoration: none;}

</style>

<a href="#" id="hz">홈짱닷컴</a> 

<a href="#">Homzzang.com</a>

 

결과보기

---

id="hz"인 <a> 요소

 

<style>

a#hz:link {color: blue; text-decoration: none;}

a#hz:visited {color: silver; text-decoration: none;}

</style>

<a href="#" id="hz">홈짱닷컴</a> 

<a href="#">Homzzang.com</a>

 

결과보기

---

class="hz"인 요소

 

<style>

.hz:link {color: blue; text-decoration: none;}

.hz:visited {color: silver; text-decoration: none;}

</style>

<a href="#" class="hz">홈짱닷컴</a>

<a href="#">Homzzang.com</a>

 

결과보기

---

class="hz"인 <a> 요소

 

<style>

a.hz:link {color: blue; text-decoration: none;}

a.hz:visited {color: silver; text-decoration: none;}

</style>

<a href="#" class="hz">홈짱닷컴</a>

<a href="#">Homzzang.com</a>

 

결과보기