title: How to use begin with selector in Less
body: <p>I'm going to create a less code that will give different <code>background-color</code> to element depending on it's class. This will be for list of attachments, so class name is based on attachment extension.</p>
  
  <p>I do support some typical extensions:</p>
  
  <pre><code>.label{
      &amp;.label-pdf{
          background-color: #c70000;
      }
  
      &amp;.label-doc, &amp;.label-docx, &amp;.label-odt{
          background-color: #157efb;
      }
  
      &amp;.label-xls, &amp;.label-xlsx, &amp;.label-calc{
          background-color: #069e00;
      }
  
      &amp;.label-ppt, &amp;.label-pptx, &amp;.label-odp{
          background-color: #9e3c15;
      }
  
      &amp;.label-jpg, &amp;.label-png, &amp;.label-gif, &amp;.label-png, &amp;.label-ttf{
          background-color: #95009e;
      }
  }
  </code></pre>
  
  <p>but the problem is with some unusual extensions, or even files like: <code>jpg</code>, <code>jpeg</code>, <code>doc</code>, <code>docx</code>, this is why I would like to use expression from CSS. In pure CSS I could use:</p>
  
  <pre><code>    .label.[class^="label-"]{
          background-color: rgba(0,37,100,0.4);
      }
  </code></pre>
  
  <p>And put this code at the beginning so other classes could override this one.
  But unfortunately this sign <code>^</code> (I suppose) is breaking my Less compilation. I have been trying to do something like this:</p>
  
  <pre><code>~".label.[class^='label-']{
      background-color: rgba(0,37,100,0.4);
  }"
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>.label{
      &amp;.~"[class^='label-']"{
          background-color: rgba(0,37,100,0.4);
      }
  }
  </code></pre>
  
  <p>But still not working. So is it possible to use this selector?</p>