Grow your CSS skills. Land your dream job.

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

  • # February 11, 2013 at 4:24 pm

    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

    # February 11, 2013 at 4:44 pm

    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;
    }”

    # February 11, 2013 at 4:47 pm

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

    # February 11, 2013 at 4:54 pm

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

    # February 11, 2013 at 9:20 pm

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

    # February 12, 2013 at 12:46 am

    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*:


    # February 12, 2013 at 10:25 am

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

    # February 12, 2013 at 4:20 pm

    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.

    # February 12, 2013 at 6:28 pm

    I look forward to hearing your idea. Thanks!

    # February 12, 2013 at 9:00 pm

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

    # February 12, 2013 at 9:55 pm

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

    # February 13, 2013 at 1:33 pm

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

    # February 13, 2013 at 5:51 pm

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

    : )

    # February 13, 2013 at 7:01 pm

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

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".