CSS styles load order

help
1

Note: I assume that the class order that we giv to html elements like

<p id="btn btn-primary custom-class">ssfsad</p>

has nothing to do with applying styles, only loading order of these styles will matter.

My Issue:
I’m using material design in my project and I put my custom syles in
client\compatibility\

I have a div in

clien\views\personal\profile.html

code:

<div class="col-md-6 job-conf">
    <a  class="btn btn-primary light-btn" >GO BACK</a>	
   </div>

stylesheet

.job-conf > .light-btn {
	background: white;
  	color: gray;
  	border: 1px solid gray;
}

From above file structure it should load material design styles first and later the files in views

but it is applying the styles from material design not my own

But when I go through the sources

material design syles are at 14k line and my styles are at 32k line

that means my styles are loading last and the styles that load last should override the existing ones, still

why is it applying the styles of material design not mine?

2

Two things I can spot:

  1. CSS specificity: make your CSS selector more specific, because I’m not sure which one would count as being more specific. Easiest one would be .job-conf > .light-btn.btn-primary:not(.btn-link):not(.btn-flat) – that’s guaranteed to be more specific than the one from the library.

  2. CSS properties: background vs background-color – not sure if the latter isn’t still getting applied even if the CSS selector were more specific. In general I’d say that if you’re trying to override a style override it in the same way that it is written originally (hence: use background-color here), except if you’re absolutely sure that you know what you’re doing. I’ve done lots of CSS and couldn’t say without a test whether background would properly override an original background-color, because the latter is more specific and might take precedence? Would have to try it.

EDIT: And, as you say, your file load order should be fine. So the post title is probably a bit misleading, even though someone could learn a bit about reasoning about file load order when reading your post!

3

Thanks for the reply.

previously I tried with background-color too, it didn’t work.

Anyway I’ll try your solution by giving specific path and will let you know the output.

4

I am confused:

If I want to override a generic CSS (such as Bootstrap) for a template, where do I need to put my specific CSS?

Thanks,
Marc