CSS 입문 | CSS 선택자 | 동적 의사 클래스


CSS 동적 의사 클래스(dynamic pseudo-class)

의사 클래스 설명
:link 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택함. (기본 상태)
:visited 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택함.
:hover 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택함.
:active 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택함.
:focus 포커스를 가지고 있는 input 요소를 모두 선택함.

동적 의사 클래스(dynamic pseudo-class)

CSS에서 사용할 수 있는 동적 의사 클래스는 다음과 같다.

  • :link
  • :visited
  • :hover
  • :active
  • :focus

동적 의사 클래스를 사용하면 링크의 상태에 따라 각각의 스타일을 별도로 설정할 수 있다.

<style>
    a:link {color: orange;}
    a:visited {color: gray;}
    a:hover {color: blue;}
    a:active {color: red;}
    div:hover { background-color: blue; color: white; }
</style>

링크(link)의 상태

링크는 총 5가지의 상태를 가지며, 각 상태마다 별도의 스타일을 적용할 수 있다.

  1. link : 링크의 기본 상태이며, 사용자가 아직 한 번도 이 링크를 통해 연결된 페이지를 방문하지 않은 상태이다.
  2. visited : 사용자가 한 번이라도 이 링크를 통해 연결된 페이지를 방문한 상태이다.
  3. hover : 사용자의 마우스 커서가 링크 위에 올라가 있는 상태이다.
  4. active : 사용자가 마우스로 링크를 클릭하고 있는 상태이다.
  5. focus : 키보드나 마우스의 이벤트(event) 또는 다른 형태로 해당 요소가 포커스(focus)를 가지고 있는 상태이다.

:hover는 반드시 :link와 :visited가 먼저 정의된 후에 정의되어야 정상적으로 동작한다.
:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작한다.

<style>
    input { border: 3px solid #FFEFD5; transition: 0.5s; }
    input:focus { border: 3px solid #CD853F; }
</style>