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

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:

 

Click to comment

Leave a Reply

Your email address will not be published.

More in How To

Advertisement
Advertisement
Free Guide to start a blog and make passive income
Download Cheap Website Themes
Get Namecheap Shared Hosting With Free Domain
To Top