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 have class names hover-color-*

hover-color-red
hover-color-blue
hover-color-green

I am attempting to make a css rule for the default hyperlink color:

a:not([class*='color-']) {
    color: #3498db;
}

This is fine, however if a hyperlink exists like this:

<a href="#" class="hover-color-green">Link</a>

In this instance, the hyperlink should keep the default hyperlink color and only the hover color should be overridden, however because of the rule class*='color-' and the fact I only specified the hover color, the hyperlink is not given a normal color (#3498db).

Is there any way to update this rule so that it only triggers if the class name begins with color-? (so, ANYTHING-color- would not apply)

Answer 1

The selector you are using *= matches any attribute containing that string.

Instead, you want ^=, which matches any attribute beginning with that string.

A combination would work best:

a[class^='color-'], a[class*=' color-'] { ... }

See MDN page on CSS attribute selectors and this other SO answer.

Answer 2

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:

<a ... class="color-red hover-color-blue">test</a>

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

<a class="color-red color-blue-hover" href="#">Red</a>
<a class="color-blue color-red-hover" href="#">Blue</a>
<a href="#">Normal</a>