Clever Geek Handbook

Why is this li: last child not working in 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>
Run codeHide result


I need git to get rid of my right border of the last li element. I am setting border: none for li: last-child, but it doesn't work.

Anything I missed?

+3


source to share


4 answers


The problem with your style is that you should target the latter first li

last-child

and then stylea

add the following css to fix

CSS



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

Fiddle

+3


source


You must route the element li

with last-child

and then apply the rule to the tag a

.



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


source 


.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>
Run codeHide result


Apply style to a

insideli:last-child

+3


source


use this

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

here is an example of execution

<!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>
Run codeHide result


+1


source






More articles:


All Articles