Question

I have been searching the web for about an hour, however, I only seem to find “general” tutorials.

I have if I have a css code like

.foo {
   border-color: #ff000;
}

.foo:hover {
   border-color: #0000ff;
}

Can I make it into one class-like element? Below is a demonstration of an idea, I do not know if it is possible.

.foo {
   border-color: #ff0000;
   border-color-hover: #0000ff;
}

Answer 1

For what you’re trying to accomplish, you wouldn’t use vanilla CSS. You could look into SASS/SCSS or LESS.

LESS would let you do this:

foo { 
    border-color: #ff0000;
    &:hover { border-color: #0000ff; }
}