가상 클래스 선택자

pseudo

:가상, 가짜의 , 모조의

 

가상 클래스

: 클래스처럼 동작하며 각각의 엘리먼트의 상태에 따라서 선택자가 선택되기도 하고 안되기도함

: 태그 옆에 :를 붙인 후 사용한다.

: 밑에 있는 가상클래스가 우선순위를 가진다.

 

종류

 

1. link: 링크를 방문하지 않았을 때 동작하는 가상 클래스

    /* 방문하지 않았을 때 */

      a:link {

        color: black;

      }

 

2. visited: 링크를 방문했을 때 동작하는 가상 클래스

   a:visited {

        color: red;

      }

 

3. active: 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경

/* 모든 a태그 중 active되어있는 a 태그를 선택 */

      /* active: 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경 */

      a:active {

        color: green;

      }

 

4. hover: 마우스를 요소 위에 올려놨을 때 스타일 변경

a:hover {

        color: yellow;

      }

 

5. focus: 마우스로 해당요소를 클릭하면 요소의 스타일 변경, 가장 아래쪽에 위치하는 것이 좋음

/* 마우스로 해당 요소를 클릭하면 요소의 스타일 변경 */

      /* 기장 아래쪽에 위치하는 것이 좋다. */

      a:focus {

        color: pink;

      }

      input:focus {

        background-color: red;

        color: pink;

      }