title: How to get element by its partial class name CSS
body: <p>I am creating few css buttons and would like to style them as short as possible so I started 
  like this </p>
  
  <pre><code>[class*='mybuttons-button']{
      margin-top:5px;
      -webkit-border-radius:4px;
      -khtml-border-radius:4px;
      -moz-border-radius:4px;
      border-radius:4px;
      display:inline-block;
      padding:6px 12px;
      color:#fff;
      vertical-align:middle;
      cursor:pointer;
  }
  </code></pre>
  
  <p>which will affect all elements that contain class <code>my-button</code></p>
  
  <p>now I want to get deep in to it and do this </p>
  
  <pre><code>[class*='-large']{
      padding: 10px 16px;
      font-size:120%;
      line-height: 1.33;
      -webkit-border-radius:6px;
      -khtml-border-radius:6px;
      -moz-border-radius:6px;
      border-radius:6px;
  }
  [class*='mybuttons-button-color']{
      background:blue;
  }
  </code></pre>
  
  <p>but since the class  <code>-large</code> might come up in some 3rd party CSS added by user I would like to be more specific and say something like this instead </p>
  
  <pre><code>[class*='mybuttons-button-*ANYTHING*-large']
  </code></pre>
  
  <p>so that I dont have to do this </p>
  
  <pre><code>mybuttons-button-color-large
  mybuttons-button-red-large
  mybuttons-button-green-large
  mybuttons-button-color-medium
  mybuttons-button-red-medium
  mybuttons-button-green-medium
  </code></pre>
  
  <p>Does anyone know a way to do this? Is it possible at all, to nail the middle word instead contains only?</p>
  
  <p>I know I can space the class names etc , but would love to give this a try since, to me, this** </p>
  
  <pre><code>&lt;span class="mybuttons-button-color-large"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>looks cleaner than this:</p>
  
  <pre><code>&lt;span class="mybuttons-button color large"&gt;&lt;/span&gt;
  </code></pre>