Is it possible to give one CSS class priority over another?
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.
- 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.