title: How do you override "-moz-user-select: none;" on a child element?
body: <p>The question <em><a href="https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting">CSS rule to disable text selection highlighting</a></em> shows how to <em>prevent</em> text selection on an element. Once you have prevented selection, how can you then allow selection for a specific child element?</p>
  
  <p>For example,</p>
  
  <pre><code>&lt;div class="no-select"&gt;
      &lt;p&gt;some text that cannot be selected&lt;/p&gt;
      &lt;p class="select"&gt;some text that can be selected&lt;/p&gt;
      &lt;p&gt;some text that cannot be selected&lt;/p&gt;
  &lt;/div&gt;
  
  table.no-select {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  td.select {
      -webkit-touch-callout: all !important;
      -webkit-user-select: all !important;
      -khtml-user-select: all !important;
      -moz-user-select: all !important;
      -ms-user-select: all !important;
      user-select: all !important;
  }
  </code></pre>
  
  <p>The <code>.no-select</code> rule above works, but my attempt at a <code>.select</code> rule does not. What is the correct way to do this?</p>