:nth-child / :nth-of-type
:nth-last-child / :nth-last-of-type
9. nth-child(n) / nth-last-child(n)
1 | $('p:nth-child(1)').css("background-color", "red"); | cs |
1 | $('p:nth-last-child(1)').css("background-color", "red"); | cs |
index번호(n)는 1부터 시작한다.
nth-child(n) :
부모를 가지고 있는 자식이면서, 부모의 n번째 위치에 있는 것을 가져온다.
nth-last-child(n) :
부모의 마지막 자식부터 n만큼의 자식 요소에만 속성을 적용한다.
10. nth-of-type(n) / nth-last-of-type(n)
1 2 | $('p:nth-of-type(1)').css("background-color", "red"); $('p:nth-last-of-type(1)').css("background-color", "red"); | cs |
nth-of-type(n) :
부모태그안에 다른 태그와는 상관없이 n 번째로 나오는 해당 태그를 가져온다.
nth-last-of-type(n) :
부모태그로부터 해당 요소와 지정된 값이 일치하는 자식 요소를 뒤에서부터 찾는다.
'이전 글 > JQuery' 카테고리의 다른 글
| 7. jQuery 선택자 - 계층 선택자( '~' , ' ' , '+' , '>' ) (0) | 2018.01.23 |
|---|---|
| 6. jQuery 선택자 - :even / :odd / :only-child / :only-of-type (0) | 2018.01.23 |
| 4. jQuery 선택자 - :first / :first-child / :first-of-type / :last / :last-child / :last-of-type (0) | 2018.01.23 |
| 3. jQuery 선택자 - * / #/ . / [] / element (0) | 2018.01.23 |
| 2. jQuery 선택자(selector)란? (0) | 2018.01.23 |
