4. jQuery 선택자 - :first / :first-child / :first-of-type / :last / :last-child / :last-of-type

last / last-child / last-of-type

:first / :first-child / :first-of-type / :last / :last-child / :last-of-type을 통하여

비교적 더 자신이 원하는 요소를 가져올 수 있다.

선택자 이후의 코드 설명은 간단한 코드이기에 생략하겠다.

6. first  / last

$('p:first').css('background-color','red');

(E):first/last

document의 요소 중에 첫번째(마지막) E 유형을 찾는다.

7. first-child / last-child

$('p:first-child').css('background-color','red');

(E):first-child / last-child:

document의 요소에서 부모를 가지고 있는 자식 중에

첫번째(마지막) 자식이 E 유형 인 것을 찾는다.

8. :first-of-type / last-of-type

$('p:first-of-type').css('background-color','red');

(E):first-of-type / last-of-type: 

E 유형의 첫번째(마지막) 형제를 선택하는 선택자이다.