如何使用 CSS 删除特定边框

Question

I am trying to remove the last border on the right as seen in the picture below. How would I go about in removing this?

My code:

 #headerlinks li, a { display: inline-flex; text-decoration: none; color: black; border-right: solid 1px black; }

 <div id="headerlinks"> <nav> <ul> <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html --> <li><a href="#">Accessibility</a></li> <li></li><a href="#">Login</a></li> </ul> </nav> </div>

Answer 1

You should add style for last of li that is #headerlinks li:last-child, a

 #headerlinks li, a { display: inline-flex; text-decoration: none; color: black; border-right: solid 1px black; } #headerlinks li:last-child, a { border-right: none; }

 <div id="headerlinks"> <nav> <ul> <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html --> <li><a href="#">Accessibility</a></li> <li></li><a href="#">Login</a></li> </ul> </nav> </div>

Answer 2

If you want to remove border from all a tag then simply remove border-right:solid 1px black from css

 #headerlinks li, a { display: inline-flex; text-decoration: none; color: black; border-right: solid 1px black;//remove this if border not req. }

 <div id="headerlinks"> <nav> <ul> <li><a href="#"> Contact us </a></li> <:-- need to link and create contact us html --> <li><a href="#">Accessibility</a></li> <li></li><a href="#" style="border;none;">Login</a></li> </ul> </nav> </div>

Answer 3

You can use the selector. :last-child

 #headerlinks li a { display: inline-flex; text-decoration: none; color: black; } #headerlinks li:not(:last-child) a { border-right: solid 1px black; }

 <div id="headerlinks"> <nav> <ul> <li><a href="#"> Contact us </a></li> <!-- need to link and create contact us html --> <li><a href="#">Accessibility</a></li> <li><a href="#">Login</a></li> </ul> </nav> </div>

Answer 4

You can use the "last-child" property in css, to remove border from last element. Also remove extra closing "li" element from html.

 #headerlinks li, a { display: inline-flex; text-decoration: none; color: black; border-right: solid 1px black; } #headerlinks li:last-child, a { border-right: none; }

 <div id="headerlinks"> <nav> <ul> <li><a href="#"> Contact us </a></li> <li><a href="#">Accessibility</a></li> <li><a href="#">Login</a></li> </ul> </nav> </div>