Make !important the whole .class selector

Question

Is it possible to make the entire .class CSS selector important? I'm thinking in this kind of structure:

.custom-selector !important {   display: inline-block;   vertical-align: middle;   position: relative;   padding-left: 5px; } 

I don't know if it's possible.

Answer 1

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>