※ 가상 클래스 ※

ㄴ 순서 중요 :link -> :visited -> :hover -> :active
ㄴ 특정 기능을 사용할때
ㄴ 탭 사용시에도 적용된다.
ㄴ :link // 방문하지 않은 링크에 스타일 적용
ㄴ :visited // 방문한 링크에 스타일 적용
ㄴ :active // 웹 요소를 활성화했을 때의 스타일 적용
ㄴ :hover // 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
ㄴ :focus // 웹 요소에 초점이 맞추어졌을 때의 스타일 적용
ex)

* 앵커(내부링크)

ㄴ a href=#head
ㄴ :target // 앵커로 연결된 부분에 스타일 적용
ㄴ 일반링크(외부링크) : http://www.naver.com
ex) #reservation:target {}

* :enabled, :disabled

ㄴ 요소 사용 여부에 따라 스타일 적용
ex)

* :checked

ㄴ 체크했을 때 스타일 적용
ex) #signup input:checked + label {}

* :not

ㄴ 특정 요소를 제외하고 스타일 적용
ㄴ a:not(경로, 속성 등을 넣어 주면 된다):hover{} //a중에 not()를 제외한 a에 :hover적용
ex)
#signup input:not([type=radio]) {} // 라디오 버튼 제외하고 스타일 적용
#signup input:not([type=radio]):hover {} // 라디오 버튼 제외하고 호버 스타일 적용
.top-menu li a:not(.top-menu :last-child > a):hover{}

* 문서 구조에 따른 가상 클래스 선택자

ㄴ n은 0부터 시작
ㄴ :first-child : 부모 요소 중에서 몇 번째를 고를 것인가
ㄴ A:nth-of-type(n) : 부모 요소 중에서 A 타입중 몇 번째를 고를 것인가?
ㄴ div p:nth-child(3) // div 안에 p중에서 3번째 요소
ㄴ div p:nth-child(odd), :nth-child(2n+1) //홀수 번째
ㄴ div p:nth-child(even), :nth-child(2n) //짝수 번째

** 부모요소 안에 모든 요소 중 몇번째

ㄴ div :nth-child(n) //반드시 부모요소와 띄워 쓸것
:nth-child(n) 부모 안에 있는 모든 요소 중에서 n번째 자식을 선택
:only-child 부모 안에 자식요소가 하나뿐일 때 자식 요소를 선택
:first-child 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택
:last-child 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택
:nth-last-child(n) 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식을 선택

** 부모요소 안에 특정 요소 중에서 몇번째

ㄴ div p:nth-child(n)
A:only-type-of 부모 안에서 A 요소가 하나일 때 선택
A:first-of-type 부모 안에서 A 요소 여러개 중에서 첫 번째 A 요소를 선택
A:last-of-type 부모 안에서 A 요소 여러개 중에서 마지막 A 요소를 선택
A:nth-of-type(n) 부모 안에 있는 A 요소 중에서 n번째 자식을 선택
A:nth-last-of-type(n) 부모 안에 있는 A 요소 중에서 끝에서 n번째 자식을 선택


ex)

* 가상요소

ㄴ ::first-line : 특정 요소의 첫번째 줄에 스타일 적용
ㄴ ::first-letter : 특정 요소의 첫번째 글자에 스타일 적용
ㄴ ::before : 특정 요소의 앞에 지정한 콘텐츠 추가
ㄴ ::after : 특정 요소의 뒤에 지정한 콘텐츠 추가

ex) li.new::after {content:"NEW!!";}