[jQeury] 자식 필터 선택자 : Child filters

1. :first-child

: 모든 부모 element의 첫번째 child element를 선택한다.

: 문법 - $(":first-child")

: 예) $("p:first-child") - <p>태그의 첫번째 자식이라는 뜻이 아님. 부모의 자식 중에서 <p>태그가 첫번째인 것을 지정

: <div><span>부모의 첫번째 자식</span><p>부모의 두번째 자식</p></div> - 이때 $("p:first-child")를 입력하면 <div>태그의 <p>가 부모의 두번째 자식이므로 선택되지 않는다.

 

2. :last-child

: 모든 부모 element의 마지막번째 child element를 선택한다.

: 문법 - $(":last-child")

: 예) $("div:last-child") - <div>태그의 첫번째 자식이라는 뜻이 아님. 부모의 자식 중에서 <div>태그가 첫번째인 것을 지정

: <div><span>부모의 첫번째 자식</span><p>부모의 두번째 자식</p></div> - 이때 $("p:first-child")를 입력하면 <div>태그의 <p>가 부모의 두번째 자식이므로 선택되지 않는다.

 

3. :nth-child()

: nth-child(n) selector는 부모 element의 n번째 child를 선택한다.

: 문법 - $(":nth-child(n|even|odd|formula)")

- n : 각 child의 인덱스 번호

- even : 짝수번째 child

- odd : 홀수번째 child

- formula : 수식

: 예) $("p:nth-child(3)")

 

4. :only-child

: 각 element의 자식이 하나 있는 element를 선택한다.

: 문법 - $(":only-child")

: 예) $("p:only-child")