Is it possible to give one CSS class priority over another?

Question

Say I have a div that uses two css classes that both use text-align, but one is centered and the other is right aligned.

Is it possible to specify something that will give one class priority over the other?

Answer 1

1. specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
2. assign it after the other class
3. if two classes are in separate files, import the priority file second
4. !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.

Answer 2

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.

Answer 3

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; }

Answer 4

as “meder omuraliev” has answered, you may use a more specified selector. and I would like to provider a general way that how to sepcific a higher priority for any type of selector, that is use the attr presdeo.

for example:

html body .foo { font-family: Arial !important;}
html body .bar[attr]{ font-family: Arial !important;}

to override this you may use like this:

html body .foo:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
html body .bar[attr]:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}

Answer 5

To add to the other answers, you don't need to add selectors not related to what you originally wanted to increase specificity, the same can be achieved by repeating the same selector multiple times:

.foo.foo takes precedence over .foo, and .foo.foo.foo takes precedence over the previous ones.

This is better than adding non-related selectors, because you only select what you really want to select. Otherwise you might get unexpected behaviour when unrelated stuff you added changes.

Answer 6

.bar { text-align: right !important;}

Answer 7

use !important

Example :

p {
  background-color: red !important;
}

Answer 8

And last option maybe remove classes by JS ?

function removeCssClasses(src, list)
{
    // get all objects containing src class
    var objs = document.getElementsByClassName(src);
    for(var i=0;i<objs.length;i++)
    {
        var cls = objs[i].classList;
        var j = cls.length;
        while (j--) {
            // is particular object class in remove list, but ignore src class
            if (cls[j] == src) continue;
            var pos = list.indexOf(cls[j]);
            if(pos > -1)
            {
                objs[i].classList.remove(cls[j]);
            }
        }
    }
}

document.body.onload = function() {
    removeCssClasses("yourNewClass", ["Unwanted1", "Unwanted2"]);
    removeCssClasses("yourNewClass2", ["Unwanted3"]);
}