CSS 가상선택자(Pseudo-class)

191226 수업 내용 정리

---

가상선택자(Pseudo-class)

가상선택자	설명
a:link	아직 방문하지 않은 링크문자열 선택 (클릭 전)
a:visited	방문한 적이 있는 링크문자열 선택 (클릭 후)
a:hover	마우스 포인터를 올려 둔 링크문자열 선택
a:active	클릭한 순간의 링크문자열 선택
주의사항	a:hover는 a:link, a:visited 뒤에 와야함, a:active는 a:hover뒤에 와야함 즉, 표에 있는 순서대로 위에서부터 사용해야함

예제

• CSS

      a:link {color:cyan;text-decoration:none;}
  a:visited {color:powderblue;text-decoration:none;}
  a:hover {color:red;text-decoration:none;}
  a:active {color:black;text-decoration:none;}

• HTML

      <ul>
      <li><a href="http://www.daum.net">Home</a></li>
      <li><a href="#">HTML5</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
  </ul>

 

---

가상선택자는 자주 사용되기 때문에 잘 알아두면 좋겠습니다.