Is it possible to give one CSS class priority over another?
- specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
- assign it after the other class
- if two classes are in separate files, import the priority file second
- !important
!important
is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important
you can't use it to make some other rule even more important.
If you want to be explicit about it, you can specify how the combination of those two classes work together, by supplying a rule for elements that contain both classes. For instance, you can explicitly give something with both classes foo
and bar
the same styling as just bar
as follows. This works because .foo.bar
is more specific than just .foo
for elements which have both classes, and thus this rule will take precedence over the .foo
rule.
.foo { text-align: center }
.bar, .foo.bar { text-align: right }
If you don't want to be this explicit, you could just place the rule for bar
after the rule for foo
, as given selectors of the same specificity, later rules take precedence over earlier ones:
.foo { text-align: center }
.bar { text-align: right }
You can learn more about how precedence between rules is determined in the CSS specification chapter about the cascade; that's the "C" of CSS, and is important to understand well in order to take full advantage of CSS.
You should use CSS specificity to override previous declarations http://htmldog.com/guides/cssadvanced/specificity/
p = 1 point
.column = 10 points
#wrap = 100 points
So:
p.column { text-align: right; }
can be overwritten by:
body p.column { text-align: left; }