How to select “last child” with a specific class using CSS?

To select last child with a specific class using CSS is a simple process using CSS psuedo-class selectors. In this article, we will understand three different approaches to select last child with a specific class using CSS.

We are having four div elements in our HTML documnet, our task is to select the last child with a specific class using CSS.

Approaches to Select Last Child using CSS

Here is a list of approaches to select last child with a specific class using CSS which we will be discussing in this article with stepwise explaination and complete example codes.

Selecting Last Child using last-child Selector

To select last child with a specific class using CSS, we will be using CSS last-child psuedo-class selector which selects the last element inside it's parent element.

  • We have used four div tags to specify four elements, out of which we will target only last element.
  • Then, we have used ".item:last-child" selector which selects the last item.
  • At last, we have used background-color, color and padding properties which adds a green background with white text to differentiate last child among others.

Example

Here is a complete example code implementing above mentioned steps to select last child with a specific class using CSS last-child psuedo-class selector.

<html>
<head>
    <style>
        .item:last-child {
            background-color: #04af2f;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h3>
        Selecting last child with a specific class 
        using CSS
    </h3>
    <p>
        In this example we have used <strong>last-child 
        </strong> psuedo-class selector properties to 
        select last child using CSS.
    </p>
    <div class="item">First Item</div>
    <div class="item">Second Item</div>
    <div class="item">Third Item</div>
    <div class="item">Last Item</div>
</body>
</html>

Selecting Last Child using nth-last-child Selector

In this approach to select last child with a specific class using CSS, we will be using CSS nth-last-child psuedo-class selector which selects elements based on their position among sibling elements from the end.

  • For creating and designing the child elements, we have used similar approach as approach one, that is step one and step three.
  • We have used ".item:nth-last-child(1)" which selects the last child. The one in argument represents to select the last child among four sibling elements.

Example

Here is a complete example code implementing above mentioned steps to select last child with a specific class using CSS nth-last-child psuedo-class selector..

<html>
<head>
   <style>
      .item:nth-last-child(1) {
         background-color: #04af2f;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
    <h3>
        Selecting last child with a specific class 
        using CSS
    </h3>
    <p>
        In this example we have used <strong>nth-last-child()
        </strong> psuedo-class selector properties to 
        select last child using CSS.
    </p>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Last Item</div>
</body>
</html>

Selecting Last Child using last-of-type Selector

In this approach we will be using CSS last-of-type psuedo-class selector to select last child with a specific class using CSS, which selects and style the last element of its type within its parent container.

  • For creating and designing the child elements, we have used similar approach as approach one, that is step one and step three.
  • We have used ".item:last-of-type" which selects and styles the last child.

Example

Here is a complete example code implementing above mentioned steps to select last child with a specific class using CSS last-of-type psuedo-class selector..

<html>
<head>
   <style>
      .item:last-of-type {
         background-color: #04af2f;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
    <h3>
        Selecting last child with a specific class 
        using CSS
    </h3>
    <p>
        In this example we have used <strong>last-of-type
        </strong> psuedo-class selector properties to 
        select last child using CSS.
    </p>
   <div class="item">First Item</div>
   <div class="item">Second Item</div>
   <div class="item">Third Item</div>
   <div class="item">Last Item</div>
</body>
</html>

Conclusion

Selecting last child with a specific class using CSS is a task that can be achieved using different approaches. In this article, we have used three aproaches which are: by using last-child selector, nth-last-child() selector and by using last-of-type selector. All the approaches are effective in selecting the last child element with a specific class, and the approach to use depends on the specific needs of the user.

Updated on: 2024-09-10T16:28:12+05:30

7K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements