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

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

동적 의사 클래스(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>