Can you change css class precedence at loadtime?

Question

I'm working with jQuery datatables and oTableTools aButtons. I'm doing this:

oTableTools: {
    aButtons: [
        {
            sExtends: 'text',
            sButtonText: 'Add +',
            fnClick: function ( nButton, oConfig, oFlash ) {/*stuff*/},
            sButtonClass: 'btn-success'
        }
    ]
},

My problem is that the a.DTTT_button class on dataTable.tableTools.css:38 is overriding the .btn-success class on bootstrap-combined.min.css:9, so my button is grey instead of green. They are both being loaded from external sources, so I can't edit them, and changing the order in which they are loaded did not affect anything, presumably because the defintion in dataTable.tableTools.css is more specific, what with being specifically for anchors.

Is there a way to force sButtonClass to take precedence over a.DTTT_button at loadtime, or am I going to have to create a new class in my local css file to duplicate the style I want and call it instead? That feels less clean to me, so I'd rather not do it if I don't absolutely have to.

If you want to "force precedence" in the way to described, you can use **!important**... however this is generally considered **bad practice**. More details (and better solutions) here - http://stackoverflow.com/a/3706876/1538708 — adamb, Mar 08 '13 at 17:05
I can't add !important because the css files are loaded from external sources; I can't change them. — DiMono, Mar 08 '13 at 17:08

score 0 · Answer 1 · edited May 23 '17 at 12:28

You can't change precidence unless you want to remove and re-insert the sytesheets into the DOM using JavaScript in the order you want. That's a little ugly, but it can be done.

The proper way is to use CSS specificity, but since you can't edit the external files, manipulating the DOM may be the only way to go.

This may help:

Add: Add stylesheet to Head using javascript in body

Remove: How to dynamically remove a stylesheet from the current page

ScottS · Accepted Answer · 2013-03-08T18:13:54.450

I think the cleanest way given the parameters in this case is actually to create a a.sButtonClass selector in your "local css file" that loads after the a.DTTT_button class. Specificity will match, but the cascade will win for a.sButtonClass. I know you said this "feels less clean," but your contraints of not being able to manipulate the two css files make it one of the cleanest solutions. Also, if you are using a preprocessor (like LESS that boostrap is based off of), then you can have your local enhancement automatically match the bootstrap class by using that class as a mixin for your more specific selector.

However, an alternative is to not apply those styles by a class at all, and write the sButtonClass styles directly to the style attribute of the anchor element, as that will override anything that a.DTTT_button is doing (assuming a.DTTT_button does not have !important tags on its properties).

Can you change css class precedence at loadtime?

2 Answers2