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:
