How to Remove the Border of Last Item of a Menu or Widget

Updated:

by

How to Remove the Border of Last Item of a Menu or Widget featured

Do you want to remove the border of the last item of a menu or widget? You’re in the right place.

In this tutorial, I will guide you step-by-step on how to remove the border of the last Item of a menu/navigation or a widget using the CSS property “last-child”.

In HTML, borders are created to separate one item from the other, but creating a border for the last item doesn’t make sense. That’s why whenever you create borders to navigation menu, widget, or list items you want to remove the last border. The last border could be either border-bottom or it could be border-right.

How to Remove the Border of last Item

First of all, I will guide you on how to remove the border of the last item of a widget whose items are shown vertically.

The CSS to add border will be:

ul li
{
padding-bottom: 8px;
border-bottom: 1px solid lightgrey;
padding-top: 8px;
}

I will add this CSS code to remove the border-bottom of the last item of the widget.

ul li:last-child
{
border-bottom: none;
}

The complete code will be:

ul li
{
padding-bottom: 8px;
border-bottom: 1px solid lightgrey;
padding-top: 8px;
}

ul li:last-child
{
border-bottom: none;
}

You can see that the last border of widget whose items are displayed vertically, has been removed using the last-child CSS property.

the last border of widget whose items are displayed vertically, has been removed using the last-child CSS property.

If you have created a horizontal widget or a menu, use border-right instead of border-bottom.

ul li:last-child
{
border-right: none;
}

You can apply last-child property to other HTML elements like Paragraph element <p>.

<style>
p:last-child
{
color: white;
background: blue;
}
</style>

<body>

<p> My first paragraph. Lorem ipsum dollar </p>
<p> My second paragraph. Lorem ipsum dollar </p>
<p> My third paragraph. Lorem ipsum dollar </p>

</body>

The style will be applied to the last paragraph only.

If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.

Also Read

Related Topics: ,
Buy Domain and Hosting on Namecheap Now
Rank Math Best SEO WordPress Plugin Download
Download Website Themes
Mangools SEO Tools
Order Motivational T-Shirts With Quotes from Our Store Fire Ram 23.4.

Subscribe to Our Newsletter!

Leave a Reply

Your email address will not be published. Required fields are marked *