[CSS]가상 클래스와 가상 요소

가상 클래스

:link - 방문하지 않은 링크에 스타일 적용

:visited - 방문한 링크에 스타일 적용

:hover - 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용

:active - 웹 요소를 활성화했을 때 스타일 적용 ex) 웹 요소를 누르고 있을 때

:focus - 웹 요소에 초점이 맞추어져있을 때 스타일 적용

:enabled 와 disabled - 요소를 사용할 수 있을 때와 없을 때 스타일 지정 ex) 회원 약관

:checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정

:root - 문서 전체에 적용

:nth-child(n) 와 :nth-last-child(n) - 자식 요소의 위치에 따라 스타일 적용

:nth-of-type(n) 와 :nth-last-of-type(n) - 특정 태그 위치에 스타일 적용

:first-child 와 :last-child - 첫 번째, 마지막 요소에 스타일 적용

:first-of-type 와 :last-of-type - 형제 관계 요소의 위치에 따라 스타일 적용

:only-child 와 :only-of-type - 하나뿐인 자식 요소에 스타일 적용

:target - 앵커 목적지에 스타일 적용

:not - 특정 요소가 아닐 때 스타일 적용

가상 클래스 선택자가 여러 태그 중에서 원하는 태그를 선택하기 위해서 사용되는 선택자라면 가상요소는 내용의 일부만 선택해 스타일을 적용할 때 사용한다.

::first-line 와 ::first-letter - 첫 번째 줄, 첫 번째 글자에 스타일 적용

::before 와 ::after - 내용의 앞뒤에 컨텐츠 추가하기 ex) 제품 목록 옆에 'NEW!!' 텍스트를 추가할 수 있다.