CSS select class that is not with a prefix

Question

I have the following anchor with classes:

a.text-primary
a
a.text-muted

How do I select a class that has no text-? Something like this:

a:not(.text-)

But of course the code above obviously doesn't work.

Answer 1

Attribute selector is what you are looking for. Especially [attr^=value]:

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

This should work:

a:not([class^="text-"]) {
  color: orange;
}

<a class="text-a">a</a>
<a class="b">b</a>

demo

More example from MDN:

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL, 
with matching capitalization */ 
a[href*="cAsE" s] { 
  color: pink; 
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>