Can you specify that a css class should use the information from one style sheet?

Question

I have a css sheet for a big project that I can't change, "cantChange.css"

I also have a css sheet for a small portion of the project that I am able to change "canChange.css"

Both css sheets describe the style for a certain class -- and cantChange.css is overriding canChange.css.

Is there any way to give priority to a certain style sheet for a URL? Is there another way to do this with css specificity rules?

Can we see an example of a CSS definition you want to override? As you mentioned, I suggest using CSS specificity to make certain definitions take precedence over others: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity — showdev, Dec 05 '13 at 18:48

score 0 · Answer 1 · answered Dec 05 '13 at 18:49

0

The loading order of course is important. You should load "canChange.css" after you loaded the other one. On top of that CSS offers !important . Which allows for something like:

background-color: blue !important;

If that still doesn't do anything add an id to the element in question and style that one. IDs are always higher prioritized then classes or common selectors.

answered Dec 05 '13 at 18:49

Severin

8,508
14
68
117

2

!important is a blunt tool and should only be used as a last resort. – Diodeus - James MacFarlane Dec 05 '13 at 18:50

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

You've got a few options to address this:

Make your selector more specific (e.g. #body #small-project .cool-class)
Apply the styles inline (e.g. style="color: #000")
If you can change the order in which the stylesheets are loaded, load canChange.css file after cantChange.css
Give priority using !important (What does this mean?)

edited May 23 '17 at 11:57

Community

1
1

answered Dec 05 '13 at 18:49

Justin Helgerson

24,900
17
97
124

score 0 · Answer 3 · answered Dec 05 '13 at 18:50

0

You can make your own declaration MORE SPECIFIC to override the others.

For example:

body.someclass .anotherclass { ... }    

<body class="someclass">

will always override .anotherclass { ... }

answered Dec 05 '13 at 18:50

Diodeus - James MacFarlane

112,730
33
157
176

Can you specify that a css class should use the information from one style sheet?

3 Answers3