5. jQuery 선택자 - :nth-child / nth-of-type / :nth-last-child / nth-last-of-type

:nth-child / :nth-of-type 

:nth-last-child / :nth-last-of-type 

9. nth-child(n) / nth-last-child(n)

$('p:nth-child(1)').css("background-color", "red");

$('p:nth-last-child(1)').css("background-color", "red");

index번호(n)는 1부터 시작한다. 

nth-child(n) :

부모를 가지고 있는 자식이면서, 부모의 n번째 위치에 있는 것을 가져온다.

nth-last-child(n) :

부모의 마지막 자식부터 n만큼의 자식 요소에만 속성을 적용한다.

10. nth-of-type(n) / nth-last-of-type(n)

$('p:nth-of-type(1)').css("background-color", "red");
$('p:nth-last-of-type(1)').css("background-color", "red");

nth-of-type(n) :

부모태그안에 다른 태그와는 상관없이 n 번째로 나오는 해당 태그를 가져온다.

nth-last-of-type(n) :

부모태그로부터 해당 요소와 지정된 값이 일치하는 자식 요소를 뒤에서부터 찾는다.