가상 클래스는 직접 정의할 수 없고 실제 HTML에 보이지 않는다.
아래는 이를 이용한 것으로 a 태그를 이용하여 나타내보았다.
//HTML
<body>
<a href="https://naver.com" target="_blank">네이버</a> <br>
<a href="https://daum.net" target="_blank">다음</a>
</body>
//CSS
// 대표적인 가상 클래스
/* 방문하지 않은 링크일 때 */
a:link {
color: blue;
}
/* 방문한 링크일 때 */
a:visited {
color: purple;
}
/* 링크에 마우스를 올렸을 때 */
a:hover {
background-color: green;
}
/* 선택된 링크일 때 */
a:active {
background-color: red;
}
이처럼 링크별로 나누어서 색을 조정할 수 있다.