• Menu Item 1
  • Clever Geek Handbook

    Twitter.

    I have a navigation menu in Bootstrap like this:

    <ul class="nav navbar-nav navbar-right">
   <li><a href="#">Menu Item 1</li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Change Color of this Menu Item</a></li>
</ul>

    I would like to change the color of the final list item so that it does not inherit the standard color / hover properties. Is it possible to customize just the end menu item with CSS and override my Bootstraps CSS?

    My CSS is here:

    .navbar-default .navbar-nav > li > a {
   color: #ffffff;
   font-family: "Fjalla One", sans-serif;
   text-transform: uppercase;
   font-size: 17px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
   color: #0091c1;
   background-color: transparent;
}
    +3


    source to share


    3 answers


    use last-child

    .navbar-nav li:last-child {
    background: red;
}


    see this js script.

    http://jsfiddle.net/DTcHh/2690/

    +5


    source


    Yes, you can do it with a pseudo selector :last-child

    like:



    .navbar-nav > li > a {
    color: blue;
}
.navbar-nav > li:last-child > a {
    color: green;  
}
      
    
        
        
        
      
    
    
    <ul class="nav navbar-nav navbar-right">
  <li><a href="#">Menu Item 1</li>
  <li><a href="#">Menu Item 2</a></li>
  <li><a href="#">Menu Item 3</a></li>
  <li><a href="#">Change Color of this Menu Item</a></li>
 </ul>
    Run codeHide result


    +2


    source


    Use : not ()

    .navbar-default .navbar-nav > li:not(:last-child) > a

    demo - http://jsfiddle.net/victor_007/rm4wqua7/

    it won't give styles for :last-child

    or owerite styles for :last-child

    child

    .navbar-default .navbar-nav > li:last-child > a

    demo - http://jsfiddle.net/victor_007/rm4wqua7/1/

    +1


    source






    More articles:


    All Articles