title: Disable text selection on nested span (React / Electron)
body: <p>I have some nested spans. </p>
  
  <pre><code>&lt;span&gt;
   &lt;span&gt;Title&lt;/span&gt;
   &lt;span&gt;Author&lt;/span&gt;
   &lt;span&gt;Year&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>When the user tries to select them, everything will be selected (with the blue background behind the selected text). However, I want only one span to be selectable, so that the user cannot go wrong and can only select, for example, the author field. </p>
  
  <p>I have tried making the other fields not selectable by doing this:</p>
  
  <pre><code>.unselectable {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
  
    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;
  }
  </code></pre>
  
  <p>and then in my html:</p>
  
  <pre><code>&lt;span&gt;
   &lt;span class="unselectable"&gt;Title&lt;/span&gt;
   &lt;span&gt;Author&lt;/span&gt;
   &lt;span class="unselectable"&gt;Year&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>But it does not work, I can still select everything. I am using React &amp; electron, if this should make a difference.</p>