1

I'm reading and experimenting about CSS lately, however, I'm having this same issue over and over in almost every experimentation I'm doing.

The problem is simply as follows: I set properties as a general rule. Then I try to modify those properties for single-items or sometimes a completely new class. For some reason, the old (initial rule) is still present and the new class is not affecting anything.

I know that the use of !important helps in these situations, but I'm still having difficulties to get the overall logic. Sometimes it works without !important, sometimes it just.. does not.

What am I missing ?

Here is an example where the "nomargins" class is not working unless it is applied as !important. http://cssdeck.com/labs/9xevau8p

2
  • Don't be deterred by how complicated specificity looks. I've never had to compute it before. If you want to check if your rule is being overwritten, first use Chrome or Firefox with Firebug. I recommend Chrome for development but it's up to you. Hover over the element you want to check, right-click, and then select Inspect Element. On the right hand side you'll see the styles that are in play. Crossed out styles are being overwritten. Feb 7, 2013 at 15:04
  • Thank you! Yes, I use that function of chrome a lot, but the actual question still remains: "why is it crossed out ? Until now, I've known this as "the one at the bottom is always the -last- one, so it is applied". Looks like I was very wrong.
    – Mia
    Feb 7, 2013 at 15:09

3 Answers 3

5

You should look into specificity. Example

Your problem is that #main li is more specific than .nomargins.

If you want, you can add specificity to .nomargins like this #main .nomargins.

3
  • Oh god. So what is the right way to pick "all li elements in the #main div?
    – Mia
    Feb 7, 2013 at 15:11
  • 1
    There isn't a right way. I personally find it easier to only be as specific as I need to. If you needed to use #main li then #main .nomargins works fine. Feb 7, 2013 at 15:25
  • Blah. I understand it now, but well, I was using classes as sort of "rules" in my style, now it's all messed up!
    – Mia
    Feb 7, 2013 at 15:29
1

Thats a long and complicated story. Basically, the browser checks: -where the style is coming from (author stylesheet, user stylesheet, inline declaration, etc) -how specific the rule in question is (rules affecting a id will precede those affecting a class) -the order of rules (newer rules precede old ones) -and ots of other stuff. Like it has been said, most of the time the problem is specifity. Check this link for a more detaild (and long) answer: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

1

If you nest elements like this: #somediv ul li a the properties specified here will have priority. I had a lot of problems with this but after you know that, the solution is pretty easy to find. Also here is the article that might help you understand css rendering

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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