CSS 가상 클래스 선택자 - 동적 가상 클래스 선택자

 

 

 

동적 가상 클래스 선택자란?

   - 요소는 하나인데, 사용자의 동작에 따라 스타일링을 바꿔줄 수 있는 선택자

 

link와 visited

   - 하이퍼링크에 적용할 수 있는 선택자

   - 하이퍼링크 태그의 경우 한번도 클릭하지 않은 상태, 방문한 적이 있는 상태로 나뉩니다.

   - selector:link

      - 한번도 클릭한 적 없는, 즉 방문한 적 없는 상태의 하이퍼링크에 스타일을 적용하는 선택자 입니다.

 

   - selector:visited

      - 방문처리 된 하이퍼링크에 스타일을 적용하는 선택자 입니다.

 

 

hover와 active, focus

   - 마우스와 상호작용을 하는 선택자들입니다.

   - selector:hover

      - 선택된 태그에 마우스를 올리면 스타일을 적용합니다.

 

   - selector:active

      - 선택된 태그를 누르는 동안 스타일을 적용합니다.

      - mouse down 비슷한 효과를 보여줍니다.

      - link 나 hover, visited 가 적용되어있다면 active 보다 먼저 적용됩니다.

 

   - selector:focus

      - 해당 태그에서 인터랙션을 수행하고 있을때 스타일을 적용합니다.

      - selector등의 form태그와 상호작용을 할때 적용됩니다.

 

 

enabled, disabled, checked

   - selector:enabled

      - 해당 태그가 활성화 된 상태 ( disabled속성이 없을 때 )일때 스타일을 적용합니다.

   - selector:disabled

      - 해당 태그가 비활성화 된 상태 ( disabled 속성이 있을 때 )일때 스타일을 적용합니다. 

   - selector:checked

      - 해당 태그가 checked 된 상태일때 스타일을 적용합니다.

      - 주로 checkbox 나 radio 폼에 적용합니다.