3

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.

2
  • 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 - stackoverflow.com/a/3706876/1538708
    – adamb
    Mar 8, 2013 at 17:05
  • I can't add !important because the css files are loaded from external sources; I can't change them.
    – DiMono
    Mar 8, 2013 at 17:08

2 Answers 2

0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.