슈도클래스(Pseudoclasses)

슈도클래스를 이용하면 html에 기본으로 들어 있지는 않지만 웹브라우져에서는 지원이 되는 부가적인 속성을 만들어 낼 수도 있다. 예를 들어, <a> 태그는 link, active, visited 속성이 없다. 하지만 실제 웹브라우져는 링크의 상태에 따라 다른 색깔을 보여주고 있다. 그래서 다음과 같이 <a> 슈도 클래스를 정의할 수 있다.

콜론( : )을 사용

a:link{color: blue}

a:visited{color:red}

a:active{color: white}

이렇게 하면, 방문하지 않은 링크는 파란색, 방문한 링크는 빨간색, 링크를 클릭하면 하얀색으로 바뀝니다.

자주 쓰는 활용을 하나 예로 들어 보면, 링크에 밑줄이 없는데 마우스 포인터를 위로 가져가면 색깔이 바뀌면서 밑줄이 생기는 것이 많이 쓰이는데, 아래와 같다.

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

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

a:hover{color:pink;text-decoration:underline}

a:active{color:red;text-decoration:none}

a:focus{color:pink;text-decoration:underline}

일반적인 링크는 밑줄이 없는 파란색(text-decoration:none)으로 보이다가 마우스 포인터를 링크 위로 가져가면 (hover) 핑크색으로 바뀌면서 밑줄이 생기게 된다.(text-decoration:underline)

CSS의 단계화 규칙, a의 순서는 link, visited, hover, active, focus 의 순서로 정의되어야 한다.