options.items.className should add the custom class in the end

[fr0z3nfyr]

I want to add my-custom-class to a menu-item so that i get a different effect for it. I have below CSS:

.my-custom-class {    /*this wont work; look at order of class names in "Observed behavior" below*/
    color: #c00;
    /*some more funky styles*/
}
.my-custom-class.context-menu-hover, .my-custom-class:hover {    /*this would work normally*/
    color: #fff;
    background-color: #c00;
}

P.S: I do not want to use !important

Steps to Reproduce: In the initialization options, do something like:

items: {
    "edit": {
        name: "Edit", 
        icon: 'fa-pencil', 
        accesskey: 'e',
        className: "my-custom-class"
    }
}

Expected behavior: The class my-custom-class should be added at the end of the class like ... context-menu-icon--fa fa fa-pencil my-custom-class

Observed behavior: The class my-custom-class is added before context-menu-icon--fa fa fa-pencil like ... my-custom-class context-menu-icon--fa fa fa-pencil

The behavior may be different if my-custom-class is included in icon: function() {return " ... my-custom-class";}, haven't tested as that is not relevant here.

[hybridwebdev]

The order classes appear on an element do not, in anyway, impact specificity. EG:

<div class='foo bar' > vs <div class='bar foo' > Makes 0 difference.

This issue is specific to user misunderstanding how css works, and should be closed.

[fr0z3nfyr]

I don't even remember why or when I created this issue. Maybe I was too tired to even think sanely. I absolutely understand that the order of class names in attribute will have no effect only where (order) the CSS is defined does. Thanks for taking time to point out. Closing the issue.