CSS: Class name selector- name starts with

Question

I have two different type of class names. The first are named color-*. For example:

color-red
color-blue
color-green

I also ha

Answer 1

Think about it in another way. Don't change whatever not contain color inside class name. First change all a to what you want:

a {
    color: yellow;
}

a:hover {
    color: orange;
}

then you can overwrite them with:

a.color-red{...}
a.color-blue{...}
a.color-green{...}
a.hover-color-red{...}
a.hover-color-blue{...}
a.hover-color-green{...}

and now you can use it like:

test

Don't make it complicated. It can work perfectly and also in the future you can maintain your styles more easily.

If you want to use it everywhere just select it like:

.color-red{...}
.color-blue{...}
.color-green{...}
.hover-color-red{...}
.hover-color-blue{...}
.hover-color-green{...}

see the example here:

a {
  color: gray;
}
a:hover {
  color: orange;
}
.color-red, .color-red-hover:hover {
  color: red;
}    
.color-blue, .color-blue-hover:hover {
   color: blue;
}

Red
Blue
Normal