CODEWITHSUNDEEP
css
VAAA
VAAA

Reputation: 15039

HTML - Give priority to CSS style

I have an HTML that loads two stylesheet:

  1. Bootstrap style (bootstrap.css)
  2. Custom app style (site.css)

I have the following code in bootstrap.css

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

What do I need to insert into my site.css so I give priority to site.css style without modifying bootstrap.css:

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #D5D5D5
}

Upvotes: 0

Views: 1645

Answers (4)

zer00ne
zer00ne

Reputation: 43870

First, you should load the site.css file after bootstrap.css like @luka suggests. This doesn't always guarantee success because the specificity Bootstrap gives some of it's rulesets are really high. It appears in your specific situation, you shouldn't have any problem. But Bootstrap's rulesets intertwine sometimes and there may be something you're not aware of or can't locate that might be preventing your ruleset from succeeding.

In the case of you loading site.css after bootstrap.css doesn't work, do not use !important. Instead, double up on your selector:

.modal-open.modal-open .modal.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #D5D5D5
}

According to this online tool, the selector above CSS specificity score is 4, while Bootstrap's is a 2. This technique has been 100% for me for years.

Upvotes: 1

Luka Kerr
Luka Kerr

Reputation: 4239

Rather than adding !important, you can just add the custom style sheet after the bootstrap stylesheet in the <head> section of your site:

<link href="bootstrap.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">

This way, for any duplicate CSS selectors/properties the site.css will override the bootstrap.css

Upvotes: 3

Dekel
Dekel

Reputation: 62536

You have several options:

  1. If the rule is exactly the same - the last rule that exists will take over (so if you link first to the bootstrap.css and after it to the site.css - the style inside the site.css will take.
  2. You can add the !important (not the best option, but you can do it).
  3. You can duplicate the selectors: .modal-open.modal-open .modal.modal {...}

Upvotes: 1

bumbumpaw
bumbumpaw

Reputation: 2530

Try adding !important :

.modal-open .modal {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    background-color: #D5D5D5 !important;
}

Upvotes: 1

Related Questions