title: Prioritizing CSS classes?
body: <p>I'm using Twitter's Bootstrap library, version 2.0.3 to prototype a website. I'm currently using the provided modal control, albeit inline, to display what will be a form:</p>
  
  <pre><code>&lt;div class="modal in-layout span6 offset3"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3&gt;Header&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p&gt;Hello&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I wrote my own selector to make use of my custom class, <code>.in-layout</code>:</p>
  
  <pre><code>div.modal.in-layout {
      position: static;
      top: auto;
      left: auto;
      margin-top: 10px;
      margin-bottom: 10px;
  }
  </code></pre>
  
  <p>The problem is that the CSS rules are matched in a really inconvenient order:</p>
  
  <p><img src="https://i.stack.imgur.com/ds4B8.png" alt="enter image description here"></p>
  
  <p>Essentially, I need the <code>.span6</code> and <code>.offset3</code> classes to apply with a higher priority than <code>.modal</code> in order to give my <code>&lt;div&gt;</code> a margin of 260px and a width of 460px. </p>
  
  <p>Is there any way I can do this? </p>