Is there a shortcut for CSS state selectors?

Question

Is there a more compact way of writing this for example?

.behind a.delete-btn, 
.behind a.delete-btn:active, 
.behind a.delete-btn:visited, 
.behind a.delete-btn:focus, 
.behind a.delete-btn:hover {
    color: white;
    background-color: red;
    text-shadow: none;
}

Depends. If you're not trying to override previous `:active`, `:visited`, `:focus`, or `:hover` styles, you can eliminate those and let them inherit the `a.delete-btn` styles. — Blazemonger, Jul 10 '14 at 20:28
Then aside from using `!important`, you really don't have any shortcuts. — Blazemonger, Jul 10 '14 at 22:31

score 2 · Accepted Answer · edited May 23 '17 at 12:31

Currently there isn't a shortcut syntax for this.

Selectors 4 will provide a :matches() pseudo-class that essentially provides this shortcut syntax, but the only implementations exist as prefixed :any(), which are reserved for internal use and testing purposes. Plus, due to parsing rules, trying to use :any() in its prefixed state would require repeating everything anyway, so you're better off waiting until browsers start implementing the standardized :matches().

Meanwhile, if you're trying to override existing styles on a elements for all states, and .behind a.delete-btn by itself is not specific enough, you can cheat by doubling one of the classes (since a class selector and a pseudo-class have the same specificity):

.behind a.delete-btn.delete-btn {
    color: white;
    background-color: red;
    text-shadow: none;
}

If this is too hacky for you, then there's no other way than to specify all its state pseudo-classes again as you have done.

Is there a shortcut for CSS state selectors?

1 Answers1