셀렉터 사용하기 #2 - 위치 기반 셀렉터

* 위치 기반 셀렉터 : DOM에서 위치를 기반으로 엘리먼트를 선택

셀렉터	설명
:first	페이지에서 처음으로 일치하는 엘리먼트  li a:first는 리스트 아이템의 첫 번째 링크를 반환
:last	페이지에서 마지막으로 일치하는 엘리먼트  li a:last는 리스트 아이템의 마지막 링크를 반환
:first-child	첫 번째 자식 엘리먼트  li:first-child는 각 리시트의 첫 번째 아이템을 반환
:last-child	마지막 자식 엘리먼트  li:last-child는 각 리스트의 마지막 아이템을 반환
:only-child	형제가 없는 모든 엘리먼트를 반환
:nth-child(n)	n번째 자식 엘리먼트  li:nth-child(2)는 각 리스트의 두 번째 리스트 아이템을 반환
:nth-child(even|odd)	짝수 또는 홀수 자식 엘리먼트  li:nth-child(even)은 각 목록의 짝수 번째 자식 엘리먼트를 반환
:nth-child(Xn+Y)	전달된 공식에 따른 n번째 자식 엘리먼트  Y는 0인 경우 생략 가능  li:nth-child(3n)은 3의 배수 번째 아이템을 반환  li:nth-child(5n+1)은 5의 배수+1번째 아이템을 반환
:even / :odd	페이지 전체의 짝수/홀수 번째 엘리먼트  li:even은 모든 짝수 번째 아이템을 반환
:eq(n)	n번째로 일치하는 엘리먼트
:gt(n)	n번째 엘리먼트(포함되지 않음)이후의 엘리먼트와 일치
:lt(n)	n번째 엘리먼트(포함되지 않음) 이전의 엘리먼트와 일치

 

. 인덱스가 0 부터 시작되지만, n번째 자식 셀렉터는 1부터 시작

  CSS와 호환성을 유지하려고

 

table#languages tbody td:first-child 또는

table#languages tbody td:nth-child(1)

 

:eq는 인덱스 0 부터 시작하고

:nth-child는 인덱스 1부터 시작