Daniel Williams Daniel Williams - 4 months ago 12
CSS Question

Condensing CSS class rules

I have code like:

#header button active:hover, #footer button active:hover {
color: purple;
}


Instead of having to list all the sub-classes/elements when only
#header/#footer
are different, is it possible to do something like:

(#header|#footer) button active:hover {
color: purple;
}

Answer

Yeah there's a matches pseudo class, but if you're hoping it will save you some typing it still needs vendor prefixes you'd have to duplicate and the support isn't great.

:matches(#header, #footer) button active:hover {
  color: purple;
}
:-webkit-any(#header, #footer) button active:hover {
  color: purple;
}
:-moz-any(#header, #footer) button active:hover {
  color: purple;
}

So as you can see it ends up being more verbose than just adding the comma and another selector at the moment.

Comments