Grow your CSS skills. Land your dream job.

Combing two :hover classes?

  • # March 6, 2013 at 2:24 am

    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

    # March 6, 2013 at 2:43 am

    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.

    # March 6, 2013 at 11:11 am

    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;
    }
    }

    # March 7, 2013 at 6:47 am

    Thanks for the suggestions! I like to work with raw css, but perhaps I’ll dive into something like SASS in the future…

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".