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.
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
Leave a Reply