Connect with us

How To Remove The Border Of The Last Item Of A Navigation

How To Remove The Border Of The Last Item Of A Navigation

How To

How To Remove The Border Of The Last Item Of A Navigation

(Last Updated On: October 18, 2021)
In HTML borders are created to separate one item from the other, but creating a border for the last item doesn’t make sense, so whenever we create borders to navigation menu or list items we want to remove or hide the last border, it could be either border-bottom or it could be border-right. We can use CSS property ‘last-child’ to remove the last border.

In this tutorial we will guide you step-by-step to how to remove the border of the Last Item of a navigation using HTML and CSS.

 

CSS :last-child Selector

For instance there is a list that shows items vertically. The CSS to add border will be:
———————————————
ul li
{
padding-bottom: 8px;
border-bottom: 1px solid lightgrey;
padding-top: 8px;
}
——————————————–

You have to add the CSS below the above code to hide the border-bottom of the last item.
——————————————–
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 last border has been removed.

 

How To Remove The Border Of The Last Item Of A Navigation Or List Using CSS | Last-Child Property

 

If you have created the border-right, to hide the border of the last item, simply write:

———————————————-
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:

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

Click to comment

Leave a Reply

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

More in How To

To Top