의사 클래스를 사용하면 DOM에 아직 없는 정보를 사용하여 요소를 선택할 수 있으며 사용자가 페이지와 상호 작용하는 방식에 따라 변경할 수 있습니다.

:hover, :focus 및 :active는 사용자의 작업에 의해 결정되는 가상 클래스입니다. 

각각은 사용자가 링크, 버튼 또는 입력 필드와 같은 페이지의 요소와 상호 작용하는 방식의 매우 구체적인 지점에 해당합니다.

우리가 오늘날 가지고 있는 입력 장치의 범위에서 이러한 의사 클래스는 사용자가 마우스, 키보드 또는 터치 스크린을 사용하여 요소와 상호 작용 하는지에 따라 약간 다르게 작동합니다. 

:hover 

포인터를 가리키는 의사 클래스라고도 하는 :hover 의사 클래스는 포인팅 장치가 반드시 요소를 활성화하지 않고 요소와 상호 작용할 때 적용됩니다.

이것의 전형적인 예는 마우스가 요소 위에 있을 때입니다.

button:hover {background-color:yellow;} 

모바일 장치에는 기본적으로 대화형 요소를 사용하여 하나의 상호 작용만 수행할 수 있습니다.이 상호 작용 요소는 두드 리거나 클릭하는 것입니다.

위의 버튼을 탭하면 "그냥" 커서를 가리키지 않아도 색상이 변경됩니다.

이것은 모바일 장치에서 이러한 의사 클래스를 트리거하는 이벤트가 충돌할 수 있기 때문입니다. 

키보드 장치 사용자의 경우 :hover 가상 클래스가 트리거되지 않습니다. 키보드는 "포인터"장치로 간주되지 않으므로 이 포인터를 가리키는 가상 클래스에 적용할 수 없습니다.

:focus 

:focus 가상 클래스는 요소가 상호 작용할 준비가 된 상태, 즉 입력 장치의 포커스를 가지고 있을 때 적용됩니다. 이것이 적용될 때 서로 다른 입력 장치간에 매우 크게 다릅니다.

마우스 또는 유사한 포인팅 장치를 사용할 때 :focus 가상 클래스는 사용자가 요소를 활성화하기 시작한 후에 적용되며 중요한 것은 사용자가 다른 요소를 활성화 할 때까지 계속 초점을 유지합니다.

예를 들어 마우스로 아래 버튼을 클릭하면 클릭 상호 작용을 시작하면 노란색으로 변합니다. 페이지의 다른 부분을 클릭하면 버튼이 기본 상태로 돌아갑니다.

button:focus { background-color: yellow; } 

키보드 사용자의 경우, 요소에 초점을 맞추는 것은 마우스 사용자를 위한 것과 매우 비슷합니다.

터치 스크린 사용자의 경우 : 사용자가 요소를 탭하면  :focus 가상 클래스가 다시 적용됩니다. 그러나 이것은 모바일 Safari 브라우저에는 적용되지 않습니다.

:active 

:active 의사 클래스는 요소가 활성화 되는 기간 동안 적용됩니다. 예를 들어 마우스를 사용하는 경우 마우스 단추를 클릭 한 시점과 릴리스 할 시점 사이의 시간이 됩니다.

아래의 버튼을 빠르게 클릭하면 간단한 색상 변경을 알 수 없지만 키를 누르고 유지하면 의사 클래스가 적용된 시기가 표시됩니다.

button:active { background-color: yellow; } 

:active 의사 클래스는 마우스와 키보드의 상호 작용과 같은 방식으로 작동합니다. 휴대 기기에서는 :focus 가상 클래스와 마찬가지로 :active 가상 클래스가 요소의 탭에 적용됩니다.

결합 :hover, :focus, :active 

한 가지 주의해야 할 점은 이 가상 클래스 각각을 적용할 수 있는 조건이 상호 배타적이지 않다는 것입니다.

실제로 요소가 마우스로 클릭되는 대부분의 세 가지 조건은 유효합니다. 마우스가 요소 위에 있으면 요소가 포커스를 받고 요소가 활성화됩니다.

세 가지 조건이 모두 적용되는 경우에만 단추의 배경을 변경하여 테스트 할 수 있습니다.

button:hover:focus:active { 

  background-color: yellow;

 } 

버튼을 클릭 한 채로 있으면 노란색으로 바뀝니다. 그러나 마우스로 드래그하여 마우스를 드래그 하면서 마우스를 올려 놓으면 마우스가 색상을 잃어 버리는 것을 볼 수 있습니다.

스타일 순서 :hover 다음 :focus 다음 :active 

이러한 조건은 동시에 적용될 수 있고 자주 적용되기 때문에 이러한 스타일을 추가하는 순서가 중요합니다.

다음 스타일이 있다고 가정 해 보겠습니다.

button:active {

   background-color: green;

 }

button:focus {

   background-color: blue;

 }

button:hover {

   background-color: red;

 } 

:hover 스타일 만 표시됩니다.

캐스케이드가 끝나고 마지막으로 정의 된 스타일이 우선합니다.

이러한 스타일을 일반적으로 발생하는 순서대로 정의하는 것이 중요한 이유이므로 새로운 상호 작용이 인식 될 때 사용자에게 명확해 집니다.

일반적으로 사용자는 먼저 요소 위로 마우스를 가져간 다음 포커스를 가져온 다음 활성화합니다. 

따라서 의사 클래스 스타일 순서를 정하는 가장 좋은 방법은 마우스로 가리키고 포커스를 맞춘 다음 활성 상태로 설정하는 것입니다.

button:hover { 

   background-color: red;

 }

button:focus {

   background-color: blue;

 }

button:active {

   background-color: green;

 }

모든 스타일이 표시됩니다.

* 모바일 Safari 브라우저에는 적용되지 않습니다.