CODEWITHSUNDEEP
htmlcss
rism
rism

Reputation: 12132

CSS - Ignores order of multiple style classes

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.

Upvotes: 0

Views: 272

Answers (2)

Kylok
Kylok

Reputation: 769

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 */
}

Upvotes: 0

Andrew
Andrew

Reputation: 20071

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

Upvotes: 3

Related Questions