CODEWITHSUNDEEP
jquerycss
user435779
user435779

Reputation: 413

Can I prevent CSS from applying to a particular element?

I guess this is sort of an odd question... and I don't even know if it's a good idea. Can I create an element and say, "I don't care what any of the stylesheets that came before said, here is how I want it styled?"

So just as an example, say I have a stylesheet that says:

button {
   /* whole bunch of stuff here, not even sure what all */
}

.someClass button {
   /* and some other crap here*/
}

.anotherClass button {
  /* and more here */
}

And then I want to write some Javascript that will do something like this:

function insertConstantButton(elemId) {
    var unchangeableButton = $('<button/>');
    unchangeableButton.css('whatIReallyWant', 'etc');
    $("#" + elemId).append(unchangeableButton);
    andNowIMagicallyStopCSSFromApplyingTo(unchangeableButton);
}

Like I say, maybe this is even a bad idea... just wondering... I have some code creating this button, and it looks great, but then suddenly I have it appearing under a different class of container than it normally appears and (surprise) it looks all different. Which I don't want. heh.

Update: Yeah, kinda knew this was a bad idea, just was wondering if it was possible. I'm not surprised it isn't, since it would kinda, uh, break CSS :)

To the person who wanted the general problem rather than an assumed solution: I have some code that will add consistent-looking scroll buttons in exactly the way the UI team wants them to look. I am trying to put them in a modal dialog now, and the modal dialog has a bunch of stuff in the stylesheet like ".ourCompanyPopup button { stuffIDontWantOnMyScrollbars; }" Overriding each one is going to be a PITA.

I could probably change the stylesheet to something like ".ourCompanyPopup button:not(.myPreciousScrollButtons)"... That will get-er-done, but might be just as much of a maintainability nightmare as anything else. Hmmm...

Upvotes: 2

Views: 9570

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Simply: no.

CSS will be applied anyway. What you can do is the following:

  • overwrite the unwanted CSS
  • make the unwanted css so specific that your button is not included

I would recommend this:

jQuery

function insertConstantButton(elemId) {
        var unchangeableButton = $('<button class="dontchange" />');
        unchangeableButton.css('whatIReallyWant', 'etc');
        $("#" + elemId).append(unchangeableButton);
    }

CSS

button:not(.dontchange) {
   /* whole bunch of stuff here, not even sure what all */
}

.someClass button:not(.dontchange) {
   /* and some other crap here*/
}

.anotherClass button:not(.dontchange) {
  /* and more here */
}

If that is not elegant enough, give the button an ID and style it in the stylesheet. jQuery

function insertConstantButton(elemId) {
        var unchangeableButton = $('<button id="dontchange" />');
        $("#" + elemId).append(unchangeableButton);
    }

CSS

button#dontchange {
    /* your CSS */
}

Upvotes: 2

kelly johnson
kelly johnson

Reputation: 1636

use an ID. One ID will override 15 million classes.

Upvotes: 3

Vapire
Vapire

Reputation: 4578

You could use the !important modifier, but you need to mark every single style you don't want to be overwritten as !important:

button {
  background-color: red;
}

.what-i-really-want {
  background-color: blue !important;
}

function insertConstantButton(elemId) {
  var unchangeableButton = $('<button/>');
  unchangeableButton.addClass('what-i-really-want');
  $("#" + elemId).append(unchangeableButton);
  andNowIMagicallyStopCSSFromApplyingTo(unchangeableButton);
}

Upvotes: 0

Related Questions