CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

Why this li:last-child is not working for my unordered list?

.navbar-nav{
          margin: 0 auto;
          display: table;
          table-layout: fixed;
          float:none;
      }

      .navbar-collapse ul li a {
        border-right: 1px solid #c0c0c0;
        padding: 0 10px;
        margin-top:15px;
      }
       .navbar-collapse ul li:last-child {
        border:none;
      }
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"> 
            <li><a href="#">MANUALS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">SPARE PART</a></li>
            <li><a href="#">WHERE TO BUY</a></li>
            <li><a href="#">SUPPORT</a></li>
            <li><a href="#">EDIT BOOK</a></li>
            <li><a href="#">ADMIN</a></li>
          </ul>
        </div>

I need git rid off my right border of last li item.I set border:none for li:last-child but not working.

Anything I miss?

Upvotes: 3

Views: 833

Answers (4)

sms247
sms247

Reputation: 4504

use this

.navbar-collapse ul li:last-child a{
    border-right:none;
}

here is the running example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    .navbar-nav{
              margin: 0 auto;
              display: table;
              table-layout: fixed;
              float:none;
          }

          .navbar-collapse ul li a {
            border-right: 1px solid #c0c0c0;
            padding: 0 10px;
            margin-top:15px;
          }
           .navbar-collapse ul li:last-child a{
		     
            border-right:none;
          }

</style>

  



</head>
<body>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav"> 
            <li><a href="#">MANUALS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">SPARE PART</a></li>
            <li><a href="#">WHERE TO BUY</a></li>
            <li><a href="#">SUPPORT</a></li>
            <li><a href="#">EDIT BOOK</a></li>
            <li><a href="#">ADMIN</a></li>
        </ul>
    </div>
</body>
</html>

Upvotes: 1

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

.navbar-nav{
          margin: 0 auto;
          display: table;
          table-layout: fixed;
          float:none;
      }

      .navbar-collapse ul li a {
        border-right: 1px solid #c0c0c0;
        padding: 0 10px;
        margin-top:15px;
      }
       .navbar-collapse ul li:last-child a{
        border:none;
      }
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav"> 
            <li><a href="#">MANUALS</a></li>
            <li><a href="#">NEWS</a></li>
            <li><a href="#">SPARE PART</a></li>
            <li><a href="#">WHERE TO BUY</a></li>
            <li><a href="#">SUPPORT</a></li>
            <li><a href="#">EDIT BOOK</a></li>
            <li><a href="#">ADMIN</a></li>
          </ul>
        </div>

Apply style on a inside li:last-child

Upvotes: 3

Burning Crystals
Burning Crystals

Reputation: 1167

You should target the li element with the last-child and then apply the rule to the a tag. 

  .navbar-collapse ul li:last-child a {
      border:none;
  }

Upvotes: 3

Shanaka
Shanaka

Reputation: 953

The problem with your styling is you should be targeting the last li of the last-child first then style the a

add the following css for the fix

CSS

.navbar-collapse ul li:last-child a {
    border-right: medium none;
}

Fiddle

Upvotes: 3

Related Questions