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)

you need to learn about css specifity and order - this way you can set the default colour at the top using just `a {}` then overwrite them with your specific classes - this way you don't need to bother with all this not and attribute includes — Pete, Jan 24 '17 at 15:45
@Pete Then my color rules instead of looking like `.color-red, .hover-color-red:hover {` would also have to include hyperlinks too: `.color-red, .hover-color-red:hover, a.color-red, a.hover-color-red:hover {`... makes for a lot more content in the css file. — MultiDev, Jan 24 '17 at 15:50
You need to provide a minimal working code example, to display what the issue is. You seem to be over complicating things. — seemly, Jan 24 '17 at 16:06
again, read my previous comment - `.color-red` trumps `a` so you would not need `a.color-red` - learn the basics and it will stand you in good stead further down the line when you may need something as complicated as you are trying to do, but usually, I find it's about the way of think about what you are trying to achieve and there will always be a simple way to reorder things — Pete, Jan 24 '17 at 16:07

score 30 · Accepted Answer · edited May 23 '17 at 12:33

30

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.

edited May 23 '17 at 12:33

Community

1
1

answered Jan 24 '17 at 15:46

Brian Stephens

5,161
19
25

1

That matches a *class attribute* which begins with `color-`, not a *class*. So it wouldn't work for `class="another-class color-green"`. – Quentin Jan 24 '17 at 15:47
But then the color class has to be the first class named for each element... very difficult to control. – MultiDev Jan 24 '17 at 15:48
1

@Quentin: yes, that is a limitation. I see the issue. – Brian Stephens Jan 24 '17 at 15:49
@Quentin: I have updated my answer to handle that limitation. – Brian Stephens Jan 24 '17 at 15:51

ICE · Answer 2 · 2017-01-24T16:53:39.117

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>

Then my color rules instead of looking like `.color-red, .hover-color-red:hover {` would also have to include hyperlinks too: `.color-red, .hover-color-red:hover, a.color-red, a.hover-color-red:hover {`... makes for a lot more content in the css file. The color rules can be applied to `
`, ``, `
` etc — MultiDev, Jan 24 '17 at 16:13
@JROB You don't need to do that. you can use it just with `.color-red, .hover-color-red:hover {`. look at this example I just made http://codepen.io/anon/pen/MJvgrJ — ICE, Jan 24 '17 at 16:49

CSS: Class name selector- name starts with

2 Answers2

Linked

Related