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.

Answer 1

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).