선택자

1) 가상 클래스 선택자

: first-child ; 형제 요소 중 첫번째 요소를 선택

.container h1: first-child가 선택하는 요소 = h1

다른 요소는 올 수 없음

: first-of-type

형제 요소 중 타입과 일치하는 제일 첫 요소

.container p:first-child{} : 첫번째 요소는 h1 이므로 아무것도 해당되지 않음

vs .container p:first-of-type{} : <p>이번엔</p> 가 해당됨, 컨테이너 내 3개 p 중에 첫번째 first-of-type, last-of-type, nth-of-type(N)

:nth-child(n)

모든 형제 요소 중 n번째 요소를 선택

ex) n = 2n, 2, 2n-1

3번에 빨간색 적용

case) nth-child(n+3) 3~5번( 0부터)

:nth-of-type(n)

:형제 요소 중 특정 형제의 n번째 요소 선택

p중에서 세번째에 있는 것

:active

활성화된 요소를 선택(버튼 등을 클릭해 요소가 활성화된 상태)

• 마우스 누른 순간부터 뗄때까지

:focus

focus를 받고 있는 입력창들의 요소 선택

cf) Focus를 받고 있는 요소 : 입력창의 커서가 활성화된 요소

탭키 등을 이용해 커서 빤짝거릴때

:visited

사용자가 방문한 적 있는 링크 선택

; 링크 눌러 해당 경로 방문기록이 브라우저상에 남아있는 링크. 인터넷 들어갔을 때 보라색으로 뜸