가상 클래스는 선택자 뒤에 띄어쓰기 없이 조합하여 사용합니다. 가상 클래스 가운데 마우스 또는 키보드에 따라 즉각 반응하도록 지시하는 클래스 :hover, :active, :focus 를 다이내믹 가상 클래스라고 부르는데 이것들을 사용할 때 주의할 점은 바로 우선순위 입니다.
코드 상으로 나중에 등장하는 클래스의 우선순위가 높기 때문에 :hover 뒤에 a:visited 를 쓰게 되면 이미 방문한 링크 위에 마우스를 올려도 :hover 명령이 적용되지 않습니다. 이미 방문한 링크 위에 마우스를 올렸을 때 반응 하도록 하려면 :visited 다음에 :hover 클래스가 등장하도록 코딩 하여야 합니다. 동일한 이유로 :hover 보다 :active 를 나중에 적어주는데 이는 프레임을 사용한 문서에서 :active 된 링크위에 마우스를 올려도 :active 속성이 남아있도록 해줍니다. 한편 :focus를 가장 나중에 적어주는 이유는 스크린을 볼 수 없는 시각 장애인들이 Tab 키를 이용하여 콘텐츠를 이용할 때 다른 가상 클래스에 의하여 :focus 의 기능을 방해받지 않기 위함 입니다. :focus 가 위치할 때 그 부분을 소리 내어 읽어주거나 :focus 로 인하여 보이지 않던 내용이 다음 이동 순서에 나타날 수도 있기 때문 입니다. 물론 일반 웹 브라우저가 아닌 시각장애인용 브라우저에서 말입니다. 이렇게 가상 클래스 코딩 순서를 외우기 어려운 경우에는 이 문구를 기억하세요. “링크 방문 시 지나치게 활동하면 주목 받습니다."
a:link { } 링크
a:visited { } 방문 시
a:hover { } 지나치게
a:active { } 활동하면
a:focus { } 주목 받습니다
가상 클래스는 a 태그 뿐 만 아니라 모든 선택자(태그, Class, ID)와 조합할 수 있지만 IE 6.x에서는 a 태그와 조합하였을 때만 정상적인 결과를 출력하고 :focus 클래스는 지원하지 않는 버그가 있습니다. 단, IE 에서는 :focus 클래스 대신 :active 클래스로 :focus 효과를 낼 수 있습니다. 또, IE에서는 가상 클래스를 사용하는 경우 a 태그의 자식 선택자 에게 이를 상속 시킬 수 없는 버그가 있습니다.
a:hover#imgLink 와 같이 imgLink 라는 ID를 가진 a 태그에 직접 스타일을 주는 것은 가능 하지만,
a:hover #userImg 와 같이 a 태그의 자식 선택자로 속성을 상속할 수 없습니다. userImg 라는 ID를 가진 요소는 :hover 클래스를 상속받을 수 없게 됩니다. IE 를 제외한 FF, NN, Opera 에서는 정상적으로 작동하는 것을 확인 하였습니다.
