title: CSS: Class name selector- name starts with
body: <p>I have two different type of class names. The first are named <code>color-*</code>. For example:</p>
  
  <pre><code>color-red
  color-blue
  color-green
  </code></pre>
  
  <p>I also have class names <code>hover-color-*</code></p>
  
  <pre><code>hover-color-red
  hover-color-blue
  hover-color-green
  </code></pre>
  
  <p>I am attempting to make a css rule for the default hyperlink color:</p>
  
  <pre><code>a:not([class*='color-']) {
      color: #3498db;
  }
  </code></pre>
  
  <p>This is fine, however if a hyperlink exists like this:</p>
  
  <pre><code>&lt;a href="#" class="hover-color-green"&gt;Link&lt;/a&gt;
  </code></pre>
  
  <p>In this instance, the hyperlink should keep the default hyperlink color and only the hover color should be overridden, however because of the rule <code>class*='color-'</code> and the fact I only specified the hover color, the hyperlink is not given a normal color (#3498db).</p>
  
  <p>Is there any way to update this rule so that it only triggers if the class name begins with <code>color-</code>? (so, <code>ANYTHING-color-</code> would not apply)</p>