728x90
first-of-type 선택자는 선택한 요소의 무리 중 첫 번째 요소만 선택한다. 이와 반대로 last-of-type 선택자는 선택한 요소의 무리 중 마지막에 위치한 요소만 선택한다.
* 기본형
| $("요소 선택:first-of-type") $("요소 선택:last-of-type") |
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 선택자 </title> <script src="js/jquery.js"></script> <script> $(function(){ $("li:first-of-type") .css({"background-color":"#ff0"}); $("li:last-of-type") .css({"background-color":"#0ff"}); }); </script> </head> <body> <h1>탐색 선택자</h1> <ul> <li>내용1-1</li> <li>내용1-2</li> <li>내용1-3</li> </ul> <ul> <li>내용2-1</li> <li>내용2-2</li> <li>내용2-3</li> </ul> </body> </html> |
위 예제에서는 2개의 <ul> 태그가 있고, 그 안의 모든 <li>태그를 선택할 경우 2개의 <li>태그 무리가 나타난다.
이떄 first-of-type , last-of-type 선택자를 사용하면 두 무리에서 첫번쨰에 위치한 <li>태그, 그리고 마지막에 위치한 <li>태그가 선택된다.
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| only-child / slice(index) 선택자 (0) | 2021.08.18 |
|---|---|
| nth-child(숫자n) / nth-last-child(숫자) 선택자 (0) | 2021.08.18 |
| eq(index) / lt(index) / gt(index) 탐색자 (0) | 2021.08.18 |
| even/odd 선택자 (0) | 2021.08.18 |
| first/last 선택자 (0) | 2021.08.18 |