Make !important the whole .class selector

First off !important applies to one specific declaration in a CSS rule. It doesn't apply to a class. So, "no" you can't make a class !important.

Second off, !important is just one part of CSS specificity. You can also use other ways to make a rule be a more specific rule to have precedence (such as referring to an id in the parent chain instead of just the class. When I'm writing CSS, using !important is my last possible choice - I'd much rather solve overrides with other specificity solutions. Usually, if you control all the CSS, this is pretty easy to avoid using !important. If you have to override some CSS that you don't control, then sometimes it is handy.

Check this question here for more details. As it explains things better.


No, it's not possible. !important is thought to be an instrument of last resort and as such should be used sparingly. !importanting whole selectors would caricature that idea.

If you need to trump other styles, use CSS specificity to your advantage. You can use, e.g., these techniques to push your style declarations to the top:

  • double class name will trump single class name:

    .custom-selector.custom-selector > .custom-selector

  • ID trumps class:

    #custom-id > .custom-class

  • IDs can be duplicated, too:

    #id#id > #id

  • inline styles trump any stylesheets:

    <style>
    p#id#id.class.class { color: green; }
    </style>
    <p id="id" class="class" style="color:red">I am red!</p>
    

Tags:

Css