title: Set a CSS rule for dynamic class names
body: <p>I have a Wordpress theme that create elements with dynamic class names. I don't want to mess the PHP code, so I want to make changes only on the CSS.</p>
  
  <p>Every element has a code like this:</p>
  
  <pre><code>&lt;dd class="variation-testing"&gt;Testing&lt;/dd&gt;
  </code></pre>
  
  <p>I tried to use this CSS rule and it should have worked, but it seems that it doesn't applied the element at all:</p>
  
  <pre><code>dd.[class^=variation-] {
    width: 48%;
    float: left;
  }
  </code></pre>
  
  <p>How can I add a CSS by using the first part of the class only?</p>
  
  <p><strong>Update</strong>:</p>
  
  <p>The answer was simple and found in the comments. The right CSS is without the dot.</p>
  
  <pre><code>dd[class^=variation-] {
    width: 48%;
    float: left;
  }
  </code></pre>