CSS - Ignores order of multiple style classes

Question

I understand that CSS cascades but does the order in which style classes are declared mean nothing?

If I defined a link like so:

<a class="btn may-btn-submit mbtn-tight" href="/en-GB/Buyer/QuotesReceived/" id="red">View item quotes</a>

I would expect that the order of style classes applied would be as written:

btn may-btn-submit mbtn-tight

but it is not. The order is actually determined by the order in the style sheet file im linking too. So if mbtn-tight is listed in the css file before may-btn-submit then any conflicting styling rules will be overridden by whatever is in may-btn-submit.

Since they are both of equal specificity I thought the order I applied them in the html actually meant something but apparently it means absolutely nothing. Do this:

    .mbtn-tight {
    margin-right: 1px;
    margin-left: 1px;
}

      .may-btn-submit {
        /*padding: 10px 14px;*/
        padding: 6px;
        color: #fff !important;
        border-color: #fE242f;
        background-color: #f45b4f;
        border-top: #f7a099;
        border-right: 1px solid #f45b4f;
        border-bottom: 1px solid #F61E0C;
        border-left: 1px solid #f45b4f;
        text-shadow: 0 -1px 1px #94342D;
        -webkit-background-clip: padding-box;
        background-color: #f45b4f;
        background-image: -o-linear-gradient(#f45b4f, #f45b00);
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f45b4f), color-stop(1, #f45b4f));
        background-image: -moz-linear-gradient(center bottom, #f45b4f 0%, #f45b4f 100%);
        -webkit-box-shadow: 0 1px 0 0 #f45b4f inset,0 1px 2px 0 rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 1px 0 0 #f45b4f inset,0 1px 2px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 0 0 #f45b4f inset,0 1px 2px 0 rgba(0, 0, 0, 0.3);
        -o-transition: none 0.3s ease-in-out 0s;
        -webkit-transition: none 0.3s ease-in-out 0s;
        -moz-transition: none 0.3s ease-in-out 0s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        width: 140px;
        margin-left: 2px;
        font-size: 12px;
        margin-left: 15px;
        text-transform: uppercase;
        line-height: 20px;
        height: 32px;
    }

And margin-left will always be 15px, regardless of the order of how I assign style rules in html. And yet if I do an .addClass in jquery the style I applied with the addClass will override any existing settings (assuming equal specificity) because it was applied last.

*"And yet if I do an .addClass in jquery the style I applied with the addClass will override any existing settings (assuming equal specificity) because it was applied last."* can you make a test case for this because I don't believe it is correct. It would also help if you reduce your example code to only what's needed to describe the issue. — Wesley Murch, May 13 '14 at 22:15
The order of the class name in the html makes no difference. The order of the css in the *css file* makes the difference. And inline/javascript css will overwrite the css in the css file unless the css file line has !important overriding item. — tnschmidt, May 13 '14 at 22:18
Seems like you got it figured out. Was there a question in there somewhere? — I wrestled a bear once., May 13 '14 at 22:19
@Adelphia The question is in the first sentence. "Does the order in which style classes are applied mean nothing?" — rism, May 13 '14 at 22:25
I just don't get it: why would you think it matters? What problem are you running into here? — Wesley Murch, May 13 '14 at 22:27

score 3 · Accepted Answer · edited May 23 '17 at 11:57

3

Correct, the order in the list doesn't mean anything.

The specificity, and the order in the stylesheet, and the order of the stylesheets being declared that matters.

Multiple CSS Classes: Properties Overlapping based on the order defined

edited May 23 '17 at 11:57

Community

1
1

answered May 13 '14 at 22:16

Andrew

18,680
13
103
118

Kylok · Answer 2 · 2014-05-13T22:28:23.200

Correct, the order in which CSS classes appear in the class attribute of an element has no significance.

There are many ways to specify the exact behavior you're looking for with multiple classes though. You can make certain styles apply regardless of their order in the stylesheet:

.class1 {
    display:block !important;
}
.class2 {
    display:inline; /* If element has class1, it will be display:block */
}

You can make CSS rules specifically for an element with two classes:

.class1.class2 {
    /* Elements with both classes get these styles */
}

Or, if you want different styling on elements with both classes on different parts of your page, you can specify the parent container:

#header .class1.class2 {
    /* Elements with both classes inside element with "header" ID */
}

#footer .class1.class2 {
    /* Elements with both classes inside element with "footer" ID */
}

CSS - Ignores order of multiple style classes

2 Answers2