What is :last-child Selector in CSS?

The last child CSS, or the :last-child selector as the name says, allows you to select the last element in a group of siblings' elements within its defining element. The :last-child selector is a pseudo-class that selects the last element in the group of siblings in its containing block. The significance of the last child CSS selector will become massive when we need to select the last element in a group of siblings without using the Class or ID selectors. Let's suppose you have a list of items with the same class name, and you want to select the last element and add a unique CSS style to it, and this can be easily possible through the last child selector.

The last-child selector is called a “structural pseudo-class” within the CSS Selectors Level 3 spec, indicating that it’s used to style the content primarily based on its parent and sibling relationship.

The last child CSS is useful when you have a sibling group of <p> tags that contain more than 5 <p> tags, and you want select and style the last tag without using the Class or ID selector.

Syntax and Parameters

The syntax of last child CSS or the last-child selector is simple, follows the straightforward convention, and can be written like the below.

You can add the last-child selector using a colon (:) sign after the element you want to select.

The above code follows the simple convention, and let's break it down to make it more understandable.

• ElementName:- This means adding the name of the HTML element you want to select.
• last-child:- The last-child selector follows after color (:) is used to select the last element.
• CSS style properties:- After selecting the element, you have the power to add style according to your needs.

Basic Example

Now you know the syntax of a last-child selector. Let me give you an example of the last-child selector with the code and output.

Suppose you want to select the last <p> tag from the sibling group and make it bold and colorful so it looks attractive and differentiates itself from the other paragraph.

HTML CODE

Below we have four <p> tags inside a <div> container, and we want to select and style the last <p> tag using the last child CSS or last-child selector.

CSS CODE

The code below follows our syntax convention, which means that we first need to type the element's name; Then, we've followed the colon to add the last-child selector, then we specify the styles we want to apply to the last element selected.

OUTPUT

The above code selects the last <p> tag and applies the brown color and antique-white background color to our last selected element. Additionally, we also made the font-weight bold to make it highlighted.

You can see the output in the below image.

How Does the last-child Selector Work in CSS?

HTML CODE

Imagine you have a group of <p> tags and wants to select the last element. In that case, the last-child selector comes handy.

The last child CSS or the last-child selector works based on two parts,

1. First, it selects the last element from the group of siblings.

The above CSS code first selects the last element from the group of siblings.

2. After selecting the last element, it applies the given CSS style to the selected element.

The braces contain the CSS styles you want to apply to the selected element by the last child selector.

The last child selector is often referred to as a structural pseudo-class, meaning it can be used to style content based on parent and child content.

CSS Last Child of Class with Examples

The last child CSS or the last-child selector not just works with the HTML elements but also supports the selection based on the class names. You can easily select the last element based on the class name from a group of siblings with similar class names.

1. Basic Examples

Suppose you have the three <h2> elements with a similar class name. The last <h2> element is selected based on the class name.

HTML CODE

The code below contains a div element. Inside, we have three <h2> elements with the same class name.

CSS CODE

We're using the class name followed by the colon and last-child selector to select the last element based on the class name.

You can see that in the below code.

Ouput

The above code selects the last element based on the class name and then applies the brown color and antique-white background color to the selected element.

You can see the output of the above code in the below image.

2. Styling A List

You can easily style a list with the help of a last-child selector.

HTML CODE

Below we have an unordered list with four list items, and the fourth list item contains another unordered list inside him.

CSS CODE

The code below selects the last element, which means our fourth list item, and applies the brown color and aquamarine background color to them.

Output

The above code selects the last list item, which contains another unordered list. The brown color with the aquamarine background color applies to our full fourth list item.

You can see the output in the below image.

3. With <span> Tag

The last child CSS or the last-child selector is compatible with every HTML element, and you can also use it to select the last <span tag.

Suppose we have a <p> tag that contains text about a person with the name and email, and you want to style the last email <span> tag with the unique style.

HTML CODE

Below you have two <span> tags, and you want to style the last tag with a special style.

CSS CODE

The below code selects the last <span> tag and applies the below style to make it unique and attractive.

Ouput

The above code selects the last element and applies the azure color, blue-violet background color, and 2px solid brown border around the selected element. All these styles apply to the last element.

The output of the above code looks like the below image.

4. With <p> Tag

Selecting the last <p> from the group of siblings is another way to use last-child CSS or last-child selector.

HTML CODE

Suppose you have an <article> which contains several <p> tags, and you want to style the last <p> a little bit different, so it looks attractive and finishing for the article.

The below code contains three <p> tags, and you want to select the last element and style it.

CSS CODE

The CSS code selects the last <p> tag from the sibling group and applies the styles given below in the code.

Output

The above code selects the last <p> tag and applies the azure color, blue-violet background color, and 2px solid burlywood border to the selected last element.

The below image looks similar to the Output of our above code.

5. With <tr> Tag

Let's take a simple example: using the last child CSS or the last-child selector to select the last <tr> element from the sibling's group.

HTML CODE

The HTML code containing a table looks like the below, where we want to select and style the last <tr> tag.

CSS CODE

The below code selects the last <tr> or the row to apply the below-given styles to it.

Output

The above code selects and applies the style on the last row means the last <tr> element. The color azure and blue-violet background color apply to the selected element. The only last element will be styled, all the other rows the last-child selector does not style.

The output of the above code looks like the below image.

Difference between Last-Child and First-Of-Type

1. The last-child selector is used to select the last element from the group of siblings, whereas the first-of-type selector targets the first occurrence of the element within its container.
2. Last-child and first-of-type are defined in the CSS selectors level 3 spec as a “structural pseudo-class,” implying it is employed to style content based on its relationship with parent and sibling content.
3. The last-child selector and the first-of-type apply the given CSS styles only on the selected element.

Browser Compatibility

The :last-child selector in CSS supports all modern browsers without even an issue, but when it comes to the older version of the browser, it is not compatible with them because :last-child was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it.

The main compatibility issue is with the IE (Internet Explorer), but you don't have to worry about it because Microsoft has already announced the shutdown of the IE. It will end soon, but for now, you have other options such as polyfill for IE to support the older version.