title: CSS Selector Specificity
body: <pre><code>.input-solve[input-solve=&quot;a&quot;]{ border: 1px solid #0000ff; color: #0000ff; }
  .input-solve[input-solve=&quot;b&quot;]{ border: 1px solid #008000; color: #008000; }
  .input-solve[input-solve=&quot;c&quot;]{ border: 1px solid #b40036; color: #b40036; }
  .input-solve[input-solve=&quot;a&quot;]:after{ background-color: #0000ff; }
  .input-solve[input-solve=&quot;b&quot;]:after{ background-color: #008000; }
  .input-solve[input-solve=&quot;c&quot;]:after{ background-color: #b40036; }
  //
  .input-solve[input-solve=&quot;a1&quot;]{ border: 1px solid #0000ff; color: #0000ff; }
  .input-solve[input-solve=&quot;b1&quot;]{ border: 1px solid #008000; color: #008000; }
  .input-solve[input-solve=&quot;c1&quot;]{ border: 1px solid #b40036; color: #b40036; }
  .input-solve[input-solve=&quot;a1&quot;]:after{ background-color: #0000ff; }
  .input-solve[input-solve=&quot;b1&quot;]:after{ background-color: #008000; }
  .input-solve[input-solve=&quot;c1&quot;]:after{ background-color: #b40036; }
  </code></pre>
  <p><strong>How can I make them shorter? like</strong>
  .input-solve[input-solve=<em>&quot;a,a1&quot;</em>]{ border: 1px solid #0000ff; color: #0000ff; }</p>