728x90
nth-child(숫자) 는 선택한 요소 중 지정한 숫자에 위치한 요소를 선택한다.
nth-child(숫자n) 선택한 요소 중 지정한 배수에 위치한 요소를 선택한다.
nth-last-child(숫자) 선택 한 요소 중 마지막 위치에서 지정한 숫자에 위치한 요소를 선택한다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 선택자 </title> <script src="js/jquery.js"></script> <script> $(function(){ $("#menu1 li:nth-child(1)") .css({"background-color":"#ff0"}); $("#menu1 li:nth-child(2n)") .css({"border":"2px dashed #f00"}); $("#menu2 li:nth-last-child(2)") .css({"background-color":"#0ff"}); }); </script> </head> <body> <h1>탐색 선택자</h1> <ul id="menu1"> <li>내용1-1</li> <li>내용1-2</li> <li>내용1-3</li> <li>내용1-4</li> </ul> <ul id="menu2"> <li>내용2-1</li> <li>내용2-2</li> <li>내용2-3</li> </ul> </body> </html> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| each() / $.each() 메서드 (0) | 2021.08.18 |
|---|---|
| only-child / slice(index) 선택자 (0) | 2021.08.18 |
| first-of-type / last-of-type 선택자 (0) | 2021.08.18 |
| eq(index) / lt(index) / gt(index) 탐색자 (0) | 2021.08.18 |
| even/odd 선택자 (0) | 2021.08.18 |
