How do you figure out specificity ? I've looked at numerous articles on specificity and I can't figure any out, including HTML dog and the Star Wars version of specificity.

I don't worry about specificity much, it hardly ever happens and if it does I hunt for the problem.

 

HTMLDog says

It may not seem like something that important, and in most cases you won't come across any conflicts at all, but the larger and more complex your CSS files become, or the more CSS files you start to juggle with, the greater likelihood there is of conflicts turning up.

 

If the selectors are the same then the latest one will always take precedence.

 

Basically, it's the level of importance, not the order of importance, so

div p { color: red; }
p { color: blue; }

 

The color in a div p tag will be red even though the color blue is coded and processed last because the div p {} has a greater importance as it's more precisely defined.

Edited July 30, 201214 yr by Wickham

As a general rule, try to give your CSS only as much specificity as it asolutely needs. Inherit values where possible, and use the cascade to your advantage.

 

If you need to use !important to override something, it's a fairly good sign that your CSS sucks.