Background

I've installed the Bootstrap theme, created a sub-theme, edited it's INFO file, and the theme itself seem to appear fine while surfing at the site.

The problem

I went to this themes' Style.CSS file and added some CSS, but for some reason, Most (if not all) of the CSS I add requires the !important declaration at the end of each property... Any idea why all of these !important's needed? It is surly not the natural behavior of any theme...

Further details

  • The site is RTL.
  • I'm not sure if there is a connection but this problem might do with the fact that my new sub-theme is running online only to me, via the ThemeKey module which let's you associate a specific theme with a specific something (like users).

closed as off-topic by Mołot, Shawn Conn, kiamlaluno Aug 23 '15 at 3:38

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Mołot, Shawn Conn, kiamlaluno
If this question can be reworded to fit the rules in the help center, please edit the question.

  • In a word: specificity – Clive Aug 22 '15 at 12:16
  • By the way, please make title more specific. Ideally, title itself should be a question you are trying to ask, with body used to elaborate. – Mołot Aug 22 '15 at 12:27
  • there might be another css that is overriding your code; thus, forcing you to use the !important declaration. – No Sssweat Aug 22 '15 at 13:33
  • What CSS could this be?... It's a brand new installation... I did not insert any changes... – JohnDoea Aug 22 '15 at 13:44
  • Should this be in Drupal category? – ar7max Aug 22 '15 at 15:09
up vote 3 down vote accepted

As mentioned by @clive in the comments, the issue is certainly specificity or style precedence, which basically means that some CSS rules will have more importance than others. I'll give you the 2 most basic things you need to know:

Order. The latest in the code a CSS rule is, the more power it has. So, your custom CSS stylesheet should be loaded after other stylesheets.

Selector specificity. By rule, the more specific a selector is, the more power it has. An ID selector takes precedence over a class selector, and a class selector over an element selector. For instance, let's say you want to style a div:

<div id="login" class="col-md-1">...</div>

In your CSS, you could reference this div in, basically, three ways:

div { color: red; }

.col-md-1 { color: green; }    

#login { color: orange; }

In this case #login rules will have precedence because of two reasons: Order (it is below the other two selectors) and Selector specificity (an ID selector is more specific because it's unique). Therefore, the text color will be orange.

The only exception to these rules is when you use the !important keyword, which adds superpowers to your rule, forcing it to take precedence over any other selector. That's why in your code, it only works when you do this, as you mention.

So, instead of adding !important, try to understand your selectors and you'll do just fine.

EDIT: As mentioned in the comments, a syntax error (in this case, a missing bracket) in your CSS file could cause all following code not being read (Tip: If you use SASS or Scss, they will alert you of these type of errors).

  • Hello and thank you dearly. I must say I know these two rules (Order---The last, and specificity) I just don't know how it is even possible that a fresh new sub-theme would include such a problem... I know that I SHOULDN'T change the core Bootstrap files or even SASS... And if I shouldn't, than I can't see how Bootstrap Sub-themeing is even possible in Drupal --- We can't expect each user to add !important in the end of any property I'm sure you would agree... – JohnDoea Aug 22 '15 at 14:55
  • Maybe the reason is that I use Themekey? – JohnDoea Aug 22 '15 at 16:22
  • @benos This question isn't about Drupal/ThemeKey or even the bootstrap theme, it's simply about CSS. There are some existing styles, you want to override them. Ergo, your styles need to be more specific than the existing styles. If you find that you have to add !important to all your rules, then the code you are writing is incorrect; your rules are not specific enough. There isn't really anything more to say about it, once you understand specificity and precedence in CSS you'll realise why your follow up questions don't make sense (which is why no one can answer them, except to repeat) – Clive Aug 22 '15 at 17:46
  • To give a contrived example: say bootstrap has this (fictitious) style: section div.green { color: green; }. If you use div.green, div, .green, section .green or section div as a selector in your code, nothing will change. Your rule is less specific than the existing one. You need to use section div.green { color: red; }, or another rule that's more specific than that one, to target the element. – Clive Aug 22 '15 at 17:52
  • Guys, the problem wasn't (!) order or specificity, but rather a missing bracket in one of the top rows of the css file --- This resulted in about 98% of the css file ineffective. – JohnDoea Aug 23 '15 at 9:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.