html - 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.