CSS :last-child selector
This CSS tutorial explains how to use the CSS selector called :last-child with syntax and examples.
Description
The CSS :last-child selector allows you to target an element that is the last child element within its parent.
Syntax
The syntax for the :active CSS selector is:
element:last-child { style_properties }
Parameters or Arguments
- element
- The last of that type of element within its parent.
- style_properties
- The CSS styles to apply to the last child element.
Note
- The :last-child selector is a pseudo-class that allows you to target an element that is the last child element within its parent.
- See also :first-child, :nth-child, :nth-last_child, and :only-child selectors.
Browser Compatibility
The CSS :last-child selector has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer 7+ (IE 7+)
- IE Phone 7+
- Opera 9.5+
- Opera Mobile 10+
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the :last-child selector below, exploring examples of how to use this selector in CSS to apply styling to the last element.
With <span> tag
Let's look at a CSS :last-child example where we apply the :last-child selector to a <span> tag.
The CSS would look like this:
span:last-child { color: red; font-weight: bold; }
The HTML would look like this:
<div>
<p>Here are 2 sites: <span>techonthenet.com</span> and <span>checkyourmath.com</span>.</p>
</div>
The result would look like this (The :last-child selector would style the <span> tags as follows):
In this CSS :last-child example, the text "checkyourmath.com" that is within the last <span> tag will display as red, bolded text. The text within the first <span> tag will not be styled by the :last-child selector.
With <p> tag
Let's look at a CSS :last-child example where we apply the :last-child selector to a <p> tag.
The CSS would look like this:
p:last-child { color: blue; }
The HTML would look like this:
<div>
<p>This is the first paragraph written by techonthenet.com.</p>
<p>This is the last paragraph written by techonthenet.com.</p>
</div>
The result would look like this (The :last-child selector would style the <p> tags as follows):
In this CSS :last-child example, the color of the text within the last <p> tag will display as blue. The first <p> tag will not be styled by the :last-child selector.
With <tr> tag
Let's look at a CSS :last-child example where we apply the :last-child selector to a <tr> tag.
The CSS would look like this:
tr:last-child { background: yellow; }
The HTML would look like this:
<table>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
<tr>
<td>techonthenet.com</td>
<td>Technical reference site</td>
</tr>
<tr>
<td>checkyourmath.com</td>
<td>Math calculation site</td>
</tr>
<tr>
<td>bigactivities.com</td>
<td>Kids activity site</td>
</tr>
</table>
The result would look like this (The :last-child selector would style the <tr> tags as follows):
In this CSS :last-child example, the last row (ie: the last <tr> tag) will have a yellow background color. All other rows in the table will not be styled by the :last-child selector.
Advertisements