마직막 <p> 요소를 선택합니다.
<body> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <p>This is the last paragraph.</p> <!-- 텍스트 컬러 변경됨 --> <script> $(document).ready(function () { $("p:last").css("color", "crimson"); }); </script> </body>
:last 선택자는 마지막 요소를 선택합니다.
Note: 이 선택자는 단일 요소만 선택할 수 있습니다. 두 개 이상의 요소를 선택하려면 :last-child 선택자를 사용하십시오 (각 부모에 대해 하나씩).
이것은 주로 그룹의 마지막 요소를 선택하기 위해 다른 선택자와 함께 사용됩니다 (위의 예제에서 같이).
Tip: 그룹의 첫 번째 요소를 선택하려면, :first 선택자를 사용하십시오.
$(":last")
:last와 :last-child의 차이점을 보여줍니다.
<body> <button id="btn1">:last</button> <button id="btn2">:last-child</button><br><br> <div style="border:1px solid darkgreen"> <p>The first paragraph in div</p> <p>The last paragraph in div</p> <!-- last --> </div><br> <div style="border:1px solid dodgerblue"> <p>The first paragraph in another div</p> <p>The last paragraph in another div</p> <!-- last & last-child --> </div> <script> $(document).ready(function () { $("#btn1").click(function () { $("p:last").css("background-color", "red"); }); $("#btn2").click(function () { $("p:last-child").css("background-color", "yellow"); }); }); </script> </body>