css specificity with bootstrap

Question

I'm trying to understand the css specificity. What I want to achieve is to have the basics.css to have the highest specificity so that whatever it's in there will overwrite completely the bootstrap css, even if it's the same selector.

How can I order my files here to achieve this?

@import url("common.css");
@import url("links.css");
@import url("content.css");
@import url("colours.css");
@import url("basics.css");
@import url("/bootstrap/css/bootstrap.css");
@import url("/bootstrap/css/bootstrap-responsive.css");
@import url("/bootstrap/css/bootstrap-select.min.css");
@import url("/footable/css/footable.core.min.css");
@import url("/font-awesome/css/font-awesome.css");
@import url("/iconmoon/style.css");

jgabriel · Accepted Answer · 2014-01-11 19:58:55Z

2

The LAST CSS overwrites the FIRST CSS called.

So, in order to do this, i would recommend you to call first the least important CSS and last the most important.

In this case, you would call first bootstrap.css and last basics.css

EDIT:
Something like this

@import url("/bootstrap/css/bootstrap.css");
@import url("/bootstrap/css/bootstrap-responsive.css");
@import url("/bootstrap/css/bootstrap-select.min.css");
@import url("/footable/css/footable.core.min.css");
@import url("/font-awesome/css/font-awesome.css");
@import url("/iconmoon/style.css");
@import url("common.css");  
@import url("links.css");
@import url("content.css");
@import url("colours.css");
@import url("basics.css");

answered Jan 11, 2014 at 19:58

jgabriel

5552 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Perejda Over a year ago

In this case, does order of import take precedence over traditional specificity comparisons?

Collectives™ on Stack Overflow

css specificity with bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related