CSS 의사 클래스 (Pseudo-classes)

CSS1과 CSS2에서는 의사 클래스와 의사 요소를 나타낼 때 하나의 콜론(:)으로 함께 표기하였습니다.
하지만 CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분하기로 합니다.
따라서 CSS3에서는 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용하고 있습니다.

CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 상태를 명시할 때 사용합니다. 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.

/*버튼 태그에 마우스를 올리면 색깔이 blue로 바뀜*/
button:hover {
  color: blue;
}

의사 클래스 종류

의사 클래스	설명
:link	사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함.
:visited	사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함.
:hover	사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 모두 선택함.
:active	사용자가 마우스로 링크를 클릭하고 있는 상태를 모두 선택함.
:focus	초점이 맞춰진 input 요소를 모두 선택함.
:checked	체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled	사용할 수 있는 input 요소를 모두 선택함.
:disabled	사용할 수 없는 input 요소를 모두 선택함.
:target	현재 활성화된 target 요소를 모두 선택함.
:in-range	특정 범위 내의 값을 가지는 input 요소를 모두 선택함.
:out-of-range	특정 범위를 벗어나는 값을 가지는 input 요소를 모두 선택함.
:valid	유효한 값을 가지는 input 요소를 모두 선택함.
:invalid	유효하지 않은 값을 가지는 input 요소를 모두 선택함.
:first-child	모든 자식(child) 요소 중에서 첫 번째에 위치하는 자식(child) 요소를 모두 선택함.
:last-child	모든 자식(child) 요소 중에서 마지막에 위치하는 자식(child) 요소를 모두 선택함.
:nth-child()	모든 자식(child) 요소 중에서 앞에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-last-child()	모든 자식(child) 요소 중에서 뒤에서부터 n번째에 위치하는 자식(child) 요소를 모두 선택함.
:nth-of-type()	모든 자식(child) 요소 중에서 n번째로 등장하는 특정 요소를 모두 선택함.
:nth-last-of-type()	모든 자식(child) 요소 중에서 뒤에서부터 n번째로 등장하는 특정 요소를 모두 선택함.
:only-child	자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty	아무런 자식(child) 요소도 가지지 않는 요소를 모두 선택함.
:not(선택자)	모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용함.
:lang(언어)	특정 요소를 언어 설정에 따라 다르게 표현할 때에 사용함.

참고 자료 출처
http://www.tcpschool.com/css/css_selector_pseudoClass
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes