5.4.2 동적 가상 클래스 선택자

동적 가상 클래스 선택자는 사용자의 어떤 행동에 따라 동적으로 변하는 상태를 이용해 선택자를 지정하는 방법입니다. 대표적으로 두 가지 동적 상태가 있습니다.

표 5-4 동적 가상 클래스 선택자

:hover 선택자는 요소에 마우스를 올리면 해당 요소가 선택자로 지정되므로 다음 코드는 p 태그로 작성한 요소에 마우스를 올렸을 때 콘텐츠의 텍스트가 빨간색이 됩니다.

<style>
  p:hover{
    color:red;
  }
</style>

:active 선택자는 태그를 마우스로 클릭하면 해당 태그가 선택자로 지정됩니다. 따라서 button 태그를 클릭할 때마다 button 태그의 텍스트 색상에 빨간색이 적용됩니다.

<style>
  button:active{
    color:red;
  }
</style>