title: using regex for CSS class definition
body: <p>I have a block of html something like this:</p>
  
  <pre><code>&lt;div class="message-box01"&gt;...&lt;/div&gt;
  &lt;div class="message-box02"&gt;...&lt;/div&gt;
  &lt;div class="message-box03"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>The 2-digit number appended to 'message-box' is breaking my css because the definition is like so:</p>
  
  <pre><code>.message-box ul li {
    background: #fff;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    font-size: 25px;
    text-align: center;
    padding-top: 15%;
    transition: all 0.2s ease-in-out;
  }
  </code></pre>
  
  <p>So I'm wondering if there's a way to use a regex in the class definition, similar, I suppose, to what I'm seeing here: <a href="https://stackoverflow.com/questions/23963073/css-regex-selector-match-one-or-another-condition">another css related page</a></p>
  
  <p>to use pseudo-code:</p>
  
  <pre><code>.message-box[\d*] {
      ...
  }
  </code></pre>
  
  <p>Or something like that.</p>
  
  <p>Alternatively, is something like this possible:</p>
  
  <pre><code>[id^='messages-box'] ul li {
      list-style-type: none;
      float: left;
  }
  </code></pre>