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

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;
}
————————————————-
———————————————-
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.
