Combing two :hover classes?

[Rugg]

Hello everyone,

I’m curious if there is a better way of writing the following code…which uses the same :hover color for both classes…

.arrow:hover, .icon:hover { color: red; }

Any suggestions are appreciated. Thanks

[Merri]

In pure CSS you don’t have that many options, so that is about the only way.

There are tools that extend CSS such as SASS: http://sass-lang.com/
Gives you variables and other cool stuff, but has requirements to get it running and you’ll need to generate the final CSS file once you’re done with changes. That is an extra step.

[Kitty Giraudel]

You won’t go any further with vanilla CSS. Your code is perfectly good.

With a preprocessor, you could do something like this:

.arrow, .icon {
&:hover {
color: red;
}
}

[Author]

Posts