Finding the exact selectors to change CSS behavior
1 year, 5 months ago by Nitin Venkatesh

If you’ve had to work with Bootstrap, or have had to tweak some CSS in some other person’s code (or maybe yours) and have a tough time finding out the exact selector to apply the new CSS to, welcome :)

Although you can use your web browser’s in-built development tools, I prefer using Firebug and will be using that in this post.

Okay, so for example’s sake I am going to change the color of the navigation bar that Bootstrap offers from black (I am using navbar-inverse) to a purplish gradient and the active element of the navbar to use orange – Ubuntu colours! YAY!

Now, open up the page in your web browser and hover your mouse over the element that you want to change the CSS of then (right-click) -> Inspect element with Firebug.

firefox-right-click-img

This’ll open up Firebug at the bottom of your browser or in a new-window. Switch over to the Style Tab on it’s right-hand side (always selected by default) and just look around and you’ll be able to find the property you want to change for the selected element.

step-1-img

An interesting thing to note is that when you are allowed to change CSS in firebug itself and can view a live change. This change isn’t permanent and vanishes once the web page is reloaded. Once you’ve toyed around and are comfortable with the changes you made, copy the CSS that you modified along with the selectors, etc. (this is shown as the highlighted area in the above pic) and paste them in your CSS file.

We do the same thing again but this time right-click on the empty space in the navbar and blah, blah, blah, you know the drill.

step-2-img

Once you’ve made all the changes and copied those changes you made in Firebug to your own CSS file, you’re all set. That means our navbar is now Ubuntu-fied! YAY!

final-img

Here’s the CSS I added in my CSS file to Ubuntu-fy the navbar, it’s not perfect, but hey, it’s atleast not black and white anymore :)

.navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
background-color: #DD4814;
color: #FFFFFF;
}
.navbar-inverse .navbar-inner {
background-color: #77216F;
background-image: linear-gradient(to bottom, #77216F, #2C001E);
background-repeat: repeat-x;
border-color: #77216F;
}

Share This Article