가상 클래스 (:pseudo-class)
실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것
앵커 가상 클래스
:link (미방문 링크에 스타일 지정)
:visited(방문했던 링크에 스타일 지정)
:hover (해당요소에 마우스를 올렸을때 스타일 지정)
:active (클릭한 상태일 때 스타일 지정, 마우스 버튼을 누르는 순간부터 떼는 시점까지)
:focus (input 태그에 focus를 한 상태일 때 스타일 지정)
:checked (input 태그 타입이 checkbox, radio일 경우 해당 태그가 체크되어있을 때의 스타일 지정)
순서에 따른 가상 클래스
:first-child (형제 요소 중 첫 번째 자식요소에 스타일 지정)
:first-of-type (형제 요소 중 해당 태그의 제일 첫 요소에 스타일 지정)
:last-child (형제 요소 중 가장 마지막 요소에 스타일 지정)
:last-of-type (형제 요소 중 해당 태그의 가장 마지막 요소에 스타일 지정)
:nth-child(n) (n번째 요소에 스타일 적용)
:nth-last-child(n) (뒤에서 n번째 요소에 스타일 부여)
:only-child (형제 요소 중 유일하게 있는 요소에 스타일 부여 (다른 형제 요소가 있으면 스타일 적용X))
:only-of-type (형제 요소 중 같은 유형의 형제가 없이 유일한 요소에 스타일 부여)
상태에 따른 가상 클래스
:disabled (선택, 클릭, 입력 등을 할 수 있는 요소에 비활성을 했을 때 스타일 지정)
:enabled (disabled의 반대로 활성화 되어있는 요소에 스타일 부여)
:empty (자식 요소가 없는 태그에 스타일 부여)
:not(selector) (selector를 제외한 나머지 요소들에 스타일 지정)
:read-only(읽기전용) (input태그에 readonly속성을 지정한 요소에 스타일 지정)
:required(필수입력) (input태그에 required 속성을 지정한 요소에 스타일 지정)
(참조 블로그 : https://abcdqbbq.tistory.com/15)
가상요소 (::pseudo-element)
실제로 존재하는 요소에 가상으로 클래스를 주던 가상클래스와는 다르게
가상요소는 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 준다.
가상 클래스와의 구분을 하기 위해 이중콜론(::)의 사용을 권장하고 있다.
::before (지정된 요소의 앞에 가상의 요소 생성)
::after (지정된 요소의 뒤에 가상의 요소 생성)
::first-letter (지정된 요소의 첫 번째 글자에 스타일 적용)
::first-line (지정된 요소의 첫 번째 줄에 스타일 적용)
