title: CSS Force span not to have its parent style
body: <p>I have a span including multiple spans:</p>
  
  <pre><code>&lt;span id="sp9"&gt;
     &lt;span class="comment"&gt;/*
       &lt;span class="number"&gt;  11     &lt;/span&gt;* some text
       &lt;span class="number"&gt;  12     &lt;/span&gt;* -------------------
       &lt;span class="number"&gt;  13     &lt;/span&gt;* other text
       &lt;span class="number"&gt;  14     &lt;/span&gt;* some stuff
       &lt;span class="number"&gt;  15     &lt;/span&gt;*/
     &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>In JavaScript code I am doing this:</p>
  
  <pre><code>function highlight(id){
      document.getElementById(id).style.backgroundColor = "gray";
  }
  </code></pre>
  
  <p>In the CSS file I have the style of the class <code>number</code> like this:</p>
  
  <pre><code>.number {
      color: DarkCyan;
      background-color: none !important;
      -webkit-user-select: none; 
      -moz-user-select: none; 
      -khtml-user-select: none; 
      -ms-user-select: none; 
  }
  </code></pre>
  
  <p>When the JavaScript function is executed, the <code>numbers</code> are included in the background color change which I don't want to happen.</p>
  
  <p>I tried logging the background color of all <code>numbers</code> and it was empty (no background color) so I know they don't have it.</p>
  
  <p>How can I force the <code>numbers</code> not to have any background color?</p>
  
  <p>I am new to these types of stuff so excuse me. I have looked at other questions here and I believe I might need to change a major thing in here.</p>
  
  <p>I have tried using <code>div</code> instead of <code>span</code> which worked but in the display the <code>div</code>s were on separate lines. I changed their <code>display</code> to <code>inline-block</code> and got them to be in the same line, but the highlighting started behaving just like the spans.</p>
  
  <p>Any ideas?</p>