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
lowercase
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
Jørgen
source
to share
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>
+2
Casey rule
source
to share
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
Vitorino fernandes
source
to share