如何删除ul li最后一个孩子的边框

Question

I have set the border on :after pseudo element on every li.

 .menu_bottom ul li{ float: left; color: #00a0dc; list-style-type: none; position: relative; } .menu_bottom ul li a{ text-decoration: none; text-transform: uppercase; color: #00a0dc; padding: 5px 12px; } .menu_bottom ul li:after{ content: ""; border-right: 1px solid #00a0dc; position: absolute; right: 0px; top: 3px; height: 11px; } .menu_bottom ul li:after:last-child{ border: none; } 

 <div class="menu_bottom"> <ul> <li class="active"><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">our services</a></li> <li><a href="#">contact us</a></li> </ul> </div> 

Don't know how to remove border on last child. Used :after:last-child but it doesn't work.

Answer 1

Use :not() pseudo-class selector to avoid the last child.

 .menu_bottom ul li{ float: left; color: #00a0dc; list-style-type: none; position: relative; } .menu_bottom ul li a{ text-decoration: none; text-transform: uppercase; color: #00a0dc; padding: 5px 12px; } .menu_bottom ul li:not(:last-child):after{ content: ""; border-right: 1px solid #00a0dc; position: absolute; right: 0px; top: 3px; height: 11px; } 

 <div class="menu_bottom"> <ul> <li class="active"><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">our services</a></li> <li><a href="#">contact us</a></li> </ul> </div> 

Answer 2

Change:

.menu_bottom ul li:after:last-child {

To:

.menu_bottom ul li:last-child:after {

 .menu_bottom ul li{ float: left; color: #00a0dc; list-style-type: none; position: relative; } .menu_bottom ul li a{ text-decoration: none; text-transform: uppercase; color: #00a0dc; padding: 5px 12px; } .menu_bottom ul li:after{ content: ""; border-right: 1px solid #00a0dc; position: absolute; right: 0px; top: 3px; height: 11px; } .menu_bottom ul li:last-child:after{ border: none; } 

 <div class="menu_bottom"> <ul> <li class="active"><a href="#">home</a></li> <li><a href="#">about us</a></li> <li><a href="#">our services</a></li> <li><a href="#">contact us</a></li> </ul> </div>