CSS Last-Child

The :last-child pseudo-class is used to represent the last element of a series of sibling elements. The syntax for :last-child is as follows:

[selector-name]:last-child { [some CSS properties] }

The CSS properties defined above will be applied to the last element and not any of the prior elements. Let's take a look at two examples below:

Example 1: Use :last-child to change the last paragraph

CSS Declaration

p:last-child {font-size: 18px;}

The following HTML code,

<p>This is paragraph 1. <p>This is paragraph 2. <p>This is paragraph 3.

results in the following:

In Example 1, we used :last-child to specify that the words in the third (and last) paragraph have a font size of 18px, which is larger than that of the other paragraphs.

Example 2: Use :last-child to change the last list item

CSS Declaration

li:last-child {font-weight:bold;}

The following HTML code,

<ul> <li>List item 1 <li>List item 2 <li>List item 3 </ul>

results in the following:

In Example 2, we used :last-child to specify that the third (and last) item on the list is bold.