CODEWITHSUNDEEP
htmlcss
Prasath V
Prasath V

Reputation: 1356

How to remove border on ul li last child

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.

Upvotes: 1

Views: 2158

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115232

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>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

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>

Upvotes: 1

Related Questions