What is the easiest way to clear all pseudo classes from an element?

Question

I am writing a style sheet to extend the base style sheet, in the CSS of which there are many pseudo-classes applied to certain elements. I would like my stylesheet to overlap some of these styles with a single style that applies to the element regardless of its state, whether it hangs, focuses, etc.

For example, a base stylesheet may have styles

.classname { color:#f00; } .classname:hover { color:#0f0; } .classname:active { color:#00f; } 

but adding the following after these styles do not override pseudo-states ...

 .classname { color:#fff; } 

The following works, but it feels a lot of code for something that seems simple.

  .classname, .classname:active, .classname:hover, .classname:focus, .classname:visited, .classname:valid{ color:#fff; } 

Similarly, I know that !important will work, but this is usually a warning sign of a poorly structured style sheet.

Is there anything in the .classname:* lines that will cover all possible states, or somehow just delete all the pseudo classes?

Answer 1

If you can put classes inside some id shell, you can prevent the use of pseudo-classes due to specifics:

 body { background: black; } .classname { color:#f00; } .classname:hover { color:#0f0; } .classname:active { color:#00f; } #a .classname { color:#fff; } 

 <div class="classname">all pseudo works</div> <div id="a"> <div class="classname">none of the pseudo works</div> </div> 

Answer 2

I think this could be solved using a pseudo-class :any .

 <a href="google.com">Google</a> <style> a:link { color: blue; } a:hover { color: red; } a:-webkit-any(a) { color: green; } </style> 

https://jsfiddle.net/ycfokuju

Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any

Edit:

Actually, as I discovered, this answer is not very accurate. (Despite the fact that it has been increased 4 times, LOL).

• First of all, you do not need :any to complete this task. You need :any-link .

• The second point is that :any is the same name :matches . So, in our terminology we should use the terms :any-link and :matches and not use the term :any .

Usage example :any-link : https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

Usage examples :mathes : https://css-tricks.com/almanac/selectors/m/matches/

I have not edited the code itself, so correct it in accordance with this new information.