본문 바로가기
Coding/Client - CSS

가상 클래스 선택자

by 그냥그렇듯이 2017. 9. 8.
반응형

모든 저작권은 <생활코딩>의 생산자인 <egoing>님에게 있습니다.

문제시, 비공개로 전환하겠습니다.


<가상 클래스 선택자>

가상(pseudo)클래스 선택자는 클래스 선택자는 아니지만
엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있는 선택자이다.

 예제

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style media="screen">
a:link{ color:black; }
a:visited{ color:red; }
a:hover{ color:yellow; }
a:active{ color:green; }
a:focus{ color:white; }
input:focus{ background-color:black; color:white; }
</style>
</head>
<body>
<a href="https://opentutorials.org">방문함</a>
<a href="https://a.a">방문안함</a>
<input type="text" name="" value="">
 </body>
</html>

링크와 관련된 가상 클래스 선택자

  • :link - 방문한 적이 없는 링크
  • :visited - 방문한 적이 있는 링크
  • :hover - 마우스를 롤오버 했을 때 
  • :active - 마우스를 클릭했을 때 

위의 선택자는 순서대로 지정하는 것이 좋습니다. 특히 visited의 경우는 보안상의 이유로 아래와 같은 속성만 변경이 가능합니다. 

  • color
  • background-color
  • border-color
  • outline-color
  • The color parts of the fill and stroke properties


저작자표시 비영리 변경금지

관련글

댓글

티스토리툴바