
jQuery Topics
- jQuery Introduction
- jQuery Callbacks
- jQuery deferred
- jQuery selectors
- *
- :animated
- [name|=”value”]
- [name*=”value”]
- [name~=”value”]
- [name$=”value”]
- [name=”value”]
- [name!=”value”]
- [name^=”value”]
- :button
- :checkbox
- :checked
- Child Selector
- .class
- :contains()
- Descendant Selector
- :disabled
- Element
- :empty
- :enabled
- :eq()
- :even
- :file
- :first-child
- :first-of-type
- :first
- :focus
- :gt()
- Has Attribute
- :has()
- :header
- :hidden
- #id
- :image
- :input
- :lang()
- :last-child
- :last-of-type
- :last
- :lt()
- [name=”value”][name2=”value2″]
- (“selector1, selector2, selectorN”)
- (“prev + next”)
- (“prev ~ siblings”)
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :odd
- :only-child
- :only-of-type
- :parent
- :password
- :radio
- :reset
- :root
- :selected
- :submit
- :target
- :text
- :visible
- jQuery Ajax Events
- jQuery Ajax Methods
- jQuery Keyboard Events
- jQuery Keyboard Methods
- jQuery Form Events
- jQuery Form Methods
- jQuery Mouse Events
- jQuery Mouse Methods
- jQuery Event Properties
- jQuery Event Methods
- jQuery HTML
- jQuery CSS
- jQuery Fading
- jQuery Traversing
- jQuery Utilities
- jQuery Properties
jQuery :last-child Selector

Photo Credit to CodeToFun
Introduction
In jQuery, selectors are powerful tools that enable developers to target specific elements in HTML documents for manipulation or interaction. One particularly useful selector is :last-child
, which allows you to target the last child element of its parent. Understanding how to use the :last-child
selector effectively can streamline your development process and enhance the interactivity of your web pages.
In this guide, we'll explore the usage of the jQuery :last-child
selector with clear examples to help you grasp its potential.
Understanding :last-child Selector
The :last-child
selector targets the last child element within its parent. This can be useful for scenarios where you need to style, manipulate, or interact with the last element in a group.
Syntax
The syntax for the :last-child
selector is straightforward:
$("parent_selector:last-child")
Example
Selecting the Last Child Element:
Suppose you have a list of elements and you want to select and style the last one. You can achieve this using the
:last-child
selector as follows:index.htmlCopied<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
example.jsCopied$("ul li:last-child").css("color", "red");
This will change the text color of the last <li> element within the <ul> to red.
Applying Styles to the Last Paragraph in Each Section:
If you have multiple sections on your webpage and you want to style the last paragraph in each section differently, you can use the
:last-child
selector along with the parent selector. For example:index.htmlCopied<section> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> </section> <section> <p>Paragraph A</p> <p>Paragraph B</p> </section>
example.jsCopied$("section p:last-child").css("font-weight", "bold");
This will make the last paragraph in each section bold.
Adding Event Handlers to the Last Button in a Group:
You can also attach event handlers to the last button in a group of buttons using the
:last-child
selector. For instance:index.htmlCopied<div class="button-group"> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> </div>
example.jsCopied$(".button-group button:last-child").click(function() { alert("Last button clicked!"); });
This will trigger an alert message when the last button in the .button-group is clicked.
Dynamically Generating Content with the Last Child Selector:
If you're dynamically generating content and need to apply specific styles or functionality to the last element, you can utilize the
:last-child
selector in your jQuery scripts to target the dynamically generated last child element.
Conclusion
The jQuery :last-child
selector is a valuable tool for targeting and manipulating the last child element within its parent. Whether you're styling elements, attaching event handlers, or dynamically generating content, this selector provides a convenient way to interact with the last element in a group.
By mastering its usage, you can enhance the interactivity and aesthetics of your web pages effectively.
Join our Community:
Author

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (jQuery :last-child Selector), please comment here. I will help you immediately.