CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user244333
user244333

Reputation:

How to remove and override CSS attribute from parent class?

I have a file bootstrap.min.css which has the following class

.nav-tabs {
    border-bottom: 1px solid #ddd;
    font-size:14px;
}

I created a new css nav-tabs.css which has 

.nav-tabs {
    font-size:18px!important;
}

How do I remove the font-size from parent if the requirements change in the future?

Upvotes: 6

Views: 18122

Answers (4)

Mike
Mike

Reputation: 21

it looks like you have 2 css files either edit the bootstrap one to your liking or have the one that you want to override the other above the other one in the <head> like so

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="nav-tabs.css"/>

Upvotes: -1

apaul
apaul

Reputation: 16170

Don't use !important unless you really, really have to.

You can change the font size in this case by either adding the new css after the old like so:

.nav-tabs {
    border-bottom: 1px solid #ddd;
    font-size:14px; /*old*/
}
.nav-tabs {
    font-size:18px; /*new*/
}

Likewise using two style sheets the same will apply:

<link href="/bootstrap.css" rel="stylesheet"> //old
<link href="/Your_Custom_CSS.css" rel="stylesheet"> //new

or probably preferably by being a little more specific in the selector like so:

.nav-tabs { /*less specific*/
    border-bottom: 1px solid #ddd;
    font-size:14px; 
}
.nav-tabs li { /*more specific, li is just an example*/
    font-size:18px; 
}

Upvotes: 5

tzi
tzi

Reputation: 9459

The !important declaration is not mandatory.

There is other ways to override a CSS rule.

1. Selector specificity

The browsers calculate a specificity for every selector with a group of 3 different counters. Each counter is infinitely greater than the next one:

  1. IDs;
  2. Classes, pseudo-classes & attributes;
  3. Elements & pseudo-elements.

Some examples of selectors increasingly specific:

a { }                     /* 0,0,1 is lower than */
.button { }               /* 0,1,0 is lower than */
input[type="submit"] {}   /* 0,1,1 is lower than */
#header {}                /* 1,0,0 is lower than */
#header a {}              /* 1,0,1 is lower than */
#header a:hover {}        /* 1,1,1 is lower than */
#header a:hover::after {} /* 1,1,2 */

If a selector has a lower specificity than another one, its rules will be overrided.

In your case, the two rules have the same specificity.

2. Order

If two rules have the same specificity, the one loaded last win. It could be in the same file, the one at the bottom win, or in two different files, the file at the bottom of the HTML file win.

So if you want to override the bootstrap rules, you have to make that your rules have the same weight and that your stylesheet is loaded after the one of bootstrap:

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="nav-tab.min.css">

I hope the explanations will be useful.

Cheers, Thomas.

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157284

Instead of using !important which is a dirty way to do so, use a more specific selector like

div.class_name .nav-tabs { /* More specific selector */
   /* Styles */
}

The above selector will target .nav-tabs nested inside a div having class class_name, so this makes it unique, as well as it will override the properties in .nav-tabs (Yes, you need to re declare the properties again, else if yo don't, other properties will be picked from .nav-tabs)

Upvotes: 1

Related Questions