What is the simplest way to clear all pseudo classes on an element?

Question

I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.

For example, the base stylesheet might have the styles

.classname {
   color:#f00;
}

.classname:hover {
   color:#0f0;
}

.classname:active {
   color:#00f;
}

but adding the following after these styles does not override the 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;
  }

Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.

Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?

Answer 1

If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:

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, it could be solved with :any pseudo-class.

<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 isn't very accurate. (Despite it was upvoted 4 times, lol).

• First of all, you don't need :any fot this task. You need :any-link.

• The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.

Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link

Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/

I haven't edited the code itself, so fix it yourself according to this new information.