Using Adjacent Sibling Selectors to Style Individual Navigation Nodes

Nov 4, 2013 at 4:04 PM
I reached out to Eric regarding this topic, and he mentioned using a combination of CSS and jQuery, however I am looking for a CSS-only based approach and was hoping that someone might be able to lend me some assistance.

With a SharePoint 2010 publishing navigation, you can style individual top navigation nodes using adjacent sibling selectors as follows:
.s4-tn li.static + li.static + li.static + li.static
    background: green;
    color: #002776;

.s4-tn li.static + li.static + li.static
    background: red;
.s4-tn li.static + li.static
    background: yellow;
I am looking to do the same thing with the markup used to structure the top navigation within the SP2010 bootstrap.master file.

I know that I can style individual items as such:
.navbar-inverse .nav li.static > .menu-item  {
    border: 1px solid #333;
    color: #fff;
    height: 90px;
    margin-left: 3px;
    width: 90px;
What I would like it to be able to specify different background colors for each of my six top navigation nodes. As previously mentioned, with the OOTB navigation, I can do this using adjacent sibling selectors and making use of the cascading styles. I have tried using adjacent sibling selectors (again, using only CSS) to style these individual nodes to no avail.

Any ideas?
Nov 4, 2013 at 11:07 PM
Hi Steve,

Ah, I see what you are trying to do. Bootstrap is also going to get in your way but if you could do this without Bootstrap you can do it with Bootstrap. I suggest Firefox's Firebug plugin to help you determine the order in which styles are getting applied or if your styles are even applied (written correctly) and just being overwritten.

.navbar-inverse .nav li.static + li.static + li.static > .menu-item {
   background: #f00 none;
To provide a bg color to the 3rd element.

Nov 5, 2013 at 12:15 AM

Wow, I must have messed up along the way with my selectors. Many thanks!!