Is it possible to ignore a specific style on style sheet for a specific page?

[Dami]

I have a linked style sheet that alters the look of an input button. I do not want to use that style assignment on one specific page. I want the button to be just a generic, no-frills, default button. There are other styles on this style sheet I absolutely have to have, so I can’t NOT include the link, nor can I delete the styles controlling the look of the button as other pages that use this style sheet need it.

Is there any way to ignore that button style?

TIA.
Dami

[VladimirKrstic]

You need to add id on that page, on that element like so:

““

And in CSS style that element like so:

“#nameOfId {
/* here add properties like… */
border: none;
}”

[wolfcry911]

ignore? probably not. override – yes. does the page in question have a class or id on the body?

[Dami]

I knew there was something I wasn’t thinking of. It’s that simple, yet elusive solution that remains just out of reach. That’s what I get for overthinking it. :)

Thanks guys! That did the trick. :)

[espellcaste]

@VladimirKrstic I believe a class will do… Why put a ID when a class can do the trick?!

[__]

I would suggest that you’re falling into a trap: you’ve got a rule that is too general (it applies to *all* input [button]s, but you don’t *want* it to apply to all of them). You’re fighting a specificity war, and it creates bloated, fragile CSS.

Instead of adding a class or id to the input(s) that should be excluded, you should take the opposite approach and add a class to all the other input(s) that should be *included*:

[Dami]

Traq, my problem is that I’m being brought into a project that already exists, already has multiple style sheets and, quite possibly, hundreds of pages already functional. I don’t know the number of pages this particular style sheet touches, so I don’t want to willy-nilly start writing or re-writing stuff.

I completely agree with your thoughts, but at this point, I’m not sure that’s feasible. :)

[__]

I suspected as much. Unfortunate. Still, be careful, knowing what you’re getting yourself into.

I’ve got an idea, here, but I’m not sure it’s completely thought out. I’ll get back to you.

[Dami]

I look forward to hearing your idea. Thanks!

[VladimirKrstic]

@espellcaste

Class will do of course, but it’s not right way to be done. ID is for single use right selector. It helps you to know when you see it “hey this is used just once, on one place”. And @Dami needs exactly that.

@traq
Oo? You are talking like someone will die. :) It’s not that big deal to use ID to override some rule. Actually in this specific situation is far better to do so than to add probably 20+ class attributes in HTML.

[__]

@Dami – do you need to support IE < 9?

You can polyfill earlier versions of IE, of course, but I don’t know that you’d want to depend on js for this.

If it’s possible, I’d still recommend (working with a backup copy, of course) adding a class name to all the special-style inputs. A good text editor will allow you to make the changes with a [regex] search-and-replace so you don’t have to do it manually. How this works would depend on your editor, and on your existing markup.

*****

> @traq Oo? You are talking like someone will die. :) It’s not that big deal to use ID to override some rule. Actually in this specific situation is far better to do so than to add probably 20+ class attributes in HTML.

No, no lives at stake. I maintain, however, that it is not a preferable solution.

@Dami is dealing with the difficult situation of working with someone else’s code, that was not well designed. The goal should be to *fix* the code where possible, rather than adding more confusion on top of existing problems.

Creating a new rule with higher specificity will work, of course, but it makes everything more fragile – what happens if, later on, they want to change the font/border/whatever on *all* (yes, really all of them, this time) input elements? If they put the rule into the existing style rule, it might not affect the input(s) with the overridden styling. So, you’d have to write two selectors (existing input, overridden input) to apply the new styling. And same thing next time, except maybe four new selectors/rules.

This is likely how the problem came to be in the first place. It _would_ be preferable (maybe not _practical_) to add those 20+ class attributes.

Since you have to make *some* changes, I’d recommend making changes that will make things easier on you (and your coworkers/successors) in the future.

[Dami]

@traq, that looks like a very viable solution.

Since we’re developing a web app for the client to sell, it’s hard to say what the end users will be using. The boss said they would probably be using more modern browsers, so not to spend a lot of time correcting for pre-IE9.

I understand the basic premise of polyfilling, but have never (knowingly) put it into practice.

[__]

> Since we’re developing a web app for the client to sell, it’s hard to say what the end users will be using.

In that case, I’d *definitely* recommend “doing it right.”

: )

[Dami]

I completely agree. Now to convince the powers-that-be.

[Author]

Posts