CSS last child - Naukri Code 360

Introduction

Do you know that a pseudo-class in CSS is a keyword that is used for selecting and styling an element according to its state or position in the document tree? The ‘ CSS last child’ is also a pseudo-class of CSS, used for accessing a parent element's last child.

Do you know what is CSS last child and why exactly we use it? If not, then you don't have to worry because, in this article, we will discuss about CSS, last child, how we can use it, why it is used, its advantages, and its syntax. We will understand the concept by discussing some examples too.

About CSS last child

css last child is a pseudo-class in CSS that selects the last child element within a parent element. It is used for applying styles to the last element in a group of elements or in a list. We can also combine the ‘:last-child pseudo-class with other CSS selectors. This enables us to apply styles to the last element according to a specific context.

Syntax of css last child

selector: last-child {     
      /* Css declarations; */
}

In the above syntax, the ‘selector’ is the particular HTML element we want to style, and ‘: last-child is a pseudo-class that selects the last element of the parent.

Note*: All modern web browsers support the ‘: last-child pseudo-class. These browsers are Chrome, Firefox, Edge, Opera, and Safari.

Uses of CSS last child

The CSS last child pseudo-class is used for applying specific styles to a particular element. This is helpful when we want to highlight an element in a list.
For example, we can change the color of the last element in a list to make it stand out from others.
The pseudo-class can also be used to style the last row of data in a table. For example, if we want to highlight the total or summary row in a table.
We can also add specific functionality to the last element of an HTML parent tag.

Pros of CSS last child

Below are some of the pros of CSS last child.

Css last Child is easy to use. Therefore no additional markup or complex selectors are required.
Its use can also improve page load performance and times, and it limits the redundant amount of CSS code required.
Css last child also provides flexibility in designing web pages as specific styles can be applied to the last element regardless of an element type.

Cons of CSS last child

Below are some of the cons of CSS last child.

Css last child may not be suitable for more complex layouts.
Older versions of browsers don’t support CSS last child. This can be resolved by using alternative javascript or selectors.
This pseudo-class may be difficult to maintain.
Mastering CSS last child requires effort, which may be difficult for beginners.

Examples

Here are a few examples of CSS last child.

Applying CSS last child to a paragraph tag

Below example will show how we can apply CSS last child to a paragraph tag.

HTML Code

<!DOCTYPE html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
 	<div class="NinjaText">
   	<p><b>Hi Ninjas! Welcome to Coding Ninjas Studio!</b></p>
   	<p>
     	A pseudo-class in CSS is a keyword that is used for selecting and styling
     	an element according to its state or position in the document tree.
   	</p>
   	<p>
     	There are many CSS pseudo classes such as first-child focus active etc.Css
     	last child comes under pseudo-classes of css.
   	</p>
   	<p>
     	We can also combine the last-child pseudo-class with other CSS selectors.
     	This enables us to apply styles to the last element according to a
     	specific context.
   	</p>
 	</div>
</body>

CSS Code

.NinjaText {
 background-image: url("https://files.codingninjas.in/438375-17407.webp");
 font-family: cursive;
 position: relative;
 z-index: 1;
}

.NinjaText::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(
   255,
   255,
   255,
   0.5
 ); /* Set the background color to semi-transparent white */
 z-index: -1;
}

/* using css last child */
.NinjaText p:last-child {
 font-weight: bold;
}

Output

In the example above, we have written three paragraphs using <p> tag in HTML under the class NinjaText. To specifically access the last paragraph under the class NinjaText and to make it bold, we have used CSS last child and changed the styling. The code snippet below depicts the same.

/* using css last child */
.NinjaText p:last-child {
 font-weight: bold;
}

Applying CSS last child to a link

Below example will show how we can apply CSS last child to a link.

HTML Code

<!DOCTYPE html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
 <div class="NinjaText">
   <nav>
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">FAQ</a></li>
       <li><a href="#">Support</a></li>
     </ul>
   </nav>

   <p><b>Hi Ninjas! Welcome to Coding Ninjas Studio!</b></p>
   <p>
     A pseudo-class in CSS is a keyword that is used for selecting and styling
     an element according to its state or position in the document tree.
   </p>
   <p>
     There are many CSS pseudo classes such as first-child focus active etc.Css
     last child comes under pseudo-classes of CSS.
   </p>
   <p>
     We can also combine the last-child pseudo-class with other CSS selectors.
     This enables us to apply styles to the last element according to a
     specific context.
   </p>
 </div>
</body>

CSS Code

.NinjaText {
 background-image: url("https://files.codingninjas.in/438375-17407.webp");
 font-family: cursive;
 position: relative;
 z-index: 1;
}

.NinjaText::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(
   255,
   255,
   255,
   0.5
 ); /* Set the background color to semi-transparent white */
 z-index: -1;
}

.NinjaText nav {
 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 font-weight: 700px;
 background-color: orangered;
}

.NinjaText nav ul {
 display: flex;
 font-size: larger;
 justify-content: space-between;
 list-style-type: none;
 padding: 0;
 margin: 0;
}

/* using css last child */
.NinjaText p:last-child {
 font-weight: bold;
}

/* using css last child */
li:last-child {
 font-style: italic;
}

Output

In the above example, we have made a navbar using <nav> tag in HTML under the class NinjaText. To specifically access the last link under the <nav> tag and to make it italic, we have used CSS last child and changed the styling. The code snippet below depicts the same.

/* using css last child */
li:last-child {
 font-style: italic;
}

Applying CSS last child styling in a table

Below example will show how we can apply CSS last child in a table.

HTML Code

<!DOCTYPE html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
 <div class="NinjaText">
   <nav>
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">FAQ</a></li>
       <li><a href="#">Support</a></li>
     </ul>
   </nav>
   <table class="tb" border="solid" cellspacing="10" cellpadding="10">
     <tr>
       <th>Name</th>
       <th>Age</th>
       <th>Gender</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Ninja1</td>
       <td>38</td>
       <td>Male</td>
       <td>India</td>
     </tr>
     <tr>
       <td>Ninja2</td>
       <td>22</td>
       <td>Female</td>
       <td>Canada</td>
     </tr>
     <tr>
       <td>Ninja3</td>
       <td>27</td>
       <td>Male</td>
       <td>USA</td>
     </tr>
   </table>
 </div>
</body>

CSS Code

.NinjaText {
 background-image: url("https://files.codingninjas.in/438375-17407.webp");
 font-family: cursive;
 position: relative;
 z-index: 1;
}

.NinjaText::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(
   255,
   255,
   255,
   0.5
 ); /* Set the background color to semi-transparent white */
 z-index: -1;
}

.NinjaText nav {
 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 font-weight: 700px;
 background-color: orangered;
}

.NinjaText nav ul {
 display: flex;
 font-size: larger;
 justify-content: space-between;
 list-style-type: none;
 padding: 0;
 margin: 0;
}

/* using css last child */

li:last-child {
 font-style: italic;
}
.tb {
 margin-top: 10%;
 margin-left: 10%;
}
/* using css last child */
table tr td:last-child {
 font-style: italic;
 font-weight: 600;
}

Output

In the above example, we have made a navbar using a table using <table> tag in HTML under the class NinjaText. To access the last cell of each row under the <table> tag with class “.tb” , and to make them italic, we have used CSS last child and changed the styling.

The below code snippet depicts the same.

/* using css last child */
table tr td:last-child {
 font-style: italic;
 font-weight: 600;
}

Applying CSS last child in an HTML form

Below example will show how we can apply CSS last child in an HTML form.

HTML Code

<!DOCTYPE html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
 <div class="NinjaText">
   </nav>
   <div class="btn">
     <button type="skip">SKIP</button>
   </div>

   <form class="frm">
     <label for="name">Name:</label>
     <input type="text" id="name" name="name" /><br />
     <label for="email">Email:</label>
     <input type="email" id="email" name="email" /><br />
     <label for="Feedback">Feedback:</label>
     <textarea id="Feedback" name="Feedback"></textarea><br />
     <button type="submit">Send</button>
   </form>
 </div>
</body>

CSS Code

.NinjaText {
 background-image: url("https://files.codingninjas.in/438375-17407.webp");
 font-family: cursive;
 position: relative;
 z-index: 1;
}

.NinjaText::before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(
   255,
   255,
   255,
   0.5
 ); /* Set the background color to semi-transparent white */
 z-index: -1;
}

.btn {
 margin-left: 70%;
 padding-top: 5%;
}

.frm {
 width: 50%;
 display: flex;
 flex-direction: column;
 margin-top: 10%;
 margin-left: 10%;
 padding: 10px;
 justify-content: space-between;
}

/* using css last child */

form :last-child {
 background-color: #8a9daa;
}

Output

In the above example, we have made a form using <form> tag in HTML under the class NinjaText. We can see that we have two buttons, but we want to specifically change the styling of the button under the “form” tag. To access the last element of the form, i.e., the ‘send’ button in this case, we have used CSS last child and changed the styling.

The code snippet below depicts the same.

form :last-child {
 background-color: #8a9daa;
}

Frequently Asked Questions

What is CSS last child?

CSS last child is used for applying styles to the last element in a group of elements or in a list. We can also combine the ‘:last-child pseudo-class with other CSS selectors. This enables us to apply styles to the last element according to a specific context.

What is the use of CSS last child?

The CSS last child pseudo-class is used for applying specific styles to a particular element. This is helpful when we want to highlight an element in a list. We can also add specific functionality to the last element of an HTML parent tag.

What are the uses of CSS last child?

The CSS last child pseudo-class is used for applying specific styles to a particular element. This is helpful when we want to highlight an element in a list. The pseudo-class can also be used to style the last row of data in a table. For example, if we want to highlight the total or summary row in a table.

What are the disadvantages of CSS last child?

CSS last child may not be suitable for more complex layouts. Older versions of browsers don’t support css, the last child. This can be resolved by using alternative javascript or selectors. This pseudo-class may be difficult to maintain, and mastering CSS last child requires effort, which may be difficult for beginners.

Conclusion

We hope this article helped you with the radial gradient function in CSS. This article discussed CSS last child, why we use it, and its syntax and parameters. We have also outlined its key features by providing some examples. You can read more such articles on our platform, Coding Ninjas Studio.

Also, Read-

You will find straightforward explanations of almost every topic on this platform. So take your coding journey to the next level using Coding Ninjas.

Happy coding!