The :last-child pseudo-class matches an element that is the last element child of its parent.
Example: li:last-child styles a list item only when that li is the last child of its parent. It is the same match as :nth-last-child(1). For “last of this tag,” use :last-of-type.
Not deprecated. A long-standing structural pseudo-class from Selectors Level 3 / 4.
:last-child { /* or */ E:last-child { … }Example: li:last-child { border: 2px solid orange; }
| Form | Description | Try it |
|---|---|---|
:last-child | Any element that is the last child of its parent | Try it |
E:last-child | Element of type E that is also the last child | Try it |
vs :last-of-type | Last of that tag vs must be last child overall | Try it |
| Nested lists | Each parent has its own last child | Try it |
| Spacing trim | Remove margin on the last item in a stack | Try it |
| Menus | Drop the last divider in a horizontal nav | Try it |
:last-childConfirm the target is truly the last element child, then add the pseudo-class.
E:last-child when you care about both the tag and last position.:last-of-type.| Piece | Required? | Role |
|---|---|---|
| Parent with children | Yes | Siblings are checked relative to one parent |
:last-child | Yes | Matches only the last element child |
| Type selector | Optional | Limits the match to a tag (e.g. li) |
The orange border marks .row:last-child. Append a note after the rows to see the highlight leave Item 3.
Each snippet focuses on :last-child. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
Highlight the last li in a list.
<style>
li:last-child {
border: 2px solid orange;
}
</style>
<ul>
<li>Adhemar da Silva</li>
<li>Wang Junxia</li>
<li>Wilma Rudolph</li>
</ul>li:last-child only considers list items.li must also be the parent’s last element child.pp:last-child fails if another element comes after it.
<style>
p:last-child {
color: #16a34a;
font-weight: 700;
}
</style>
<div>
<p>This text isn't selected.</p>
<p>This text is selected!</p>
</div>
<div>
<p>This text isn't selected.</p>
<h2>Not a p — so no p:last-child here.</h2>
</div>p, so p:last-child matches.h2.p is not the last child.p? Use p:last-of-type instead.Each list has its own last child.
<style>
ul li {
color: #2563eb;
}
ul li:last-child {
color: #dc2626;
font-weight: 700;
}
</style>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>ul.ul.ul li:last-child can match in every list.Most surprises come from DOM order, not from the selector itself.
If an h2, script, or any element comes after, p:last-child will not match that p.
:last-of-typeNeed the last p even when a footer follows? Use :last-of-type.
In modern CSS, trailing text nodes or spaces between tags do not stop :last-child. Later elements do.
:nth-last-child(1):last-child and :nth-last-child(1) select the same elements.
An only child is still the last child. For “exactly one child,” use :only-child.
:last-child is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.
Supported in all modern browsers (Chrome 1+, Firefox 1+, Safari 3.2+, Edge 12+, Opera 9.5+, IE 9+). Selectors Level 4 “no parent required” is a later refinement.
Bottom line: Core matching is safe for modern sites. It is not a JavaScript runtime API.
E:last-child = tag E and last position.:nth-last-child(1).One line: :last-child styles an element only when it is the last element sibling under its parent.
Style the last element of a given tag among siblings, even when other tags follow.
8 people found this page helpful