가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다.
:hover
가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우스를 올려놓으면 색깔이 변경되는 것을 볼 수 있습니다.
See the Pen :hover by hogni-seoul (@hogni-seoul) on CodePen.
:active
가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다. 아래 예제의 입력창을 클릭해서 마우스를 뗄 때까지 색깔이 변경하는 것을 확인할 수 있습니다.
See the Pen :active by hogni-seoul (@hogni-seoul) on CodePen.
:focus
사용자의 마우스가 해당 요소를 클릭하면 요소의 스타일 변경할 수 있습니다. 클릭 이외에도 탭 키를 이용해서 요소를 선택해도 활성화됩니다.
See the Pen :focus by hogni-seoul (@hogni-seoul) on CodePen.
[참고 자료]
의사 클래스
CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.
developer.mozilla.org
이외에도 :enabled, :disabled, :link, :visited 등 다양한 가상 클래스 셀렉터가 존재합니다. 더 자세한 내용은 위의 링크를 참고할 수 있습니다.