* 위치 기반 셀렉터 : 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부터 시작

 

 

+ Recent posts