CSS Last-Child



CSS Tutorial  >  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.

Next: CSS :nth-child




Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact