title: How to make a CSS style not inherited to descendents?
body: <p>I have a div that I need to set the white-space to "no-wrap" but when I do that all the child elements are set to no-wrap and it messes things up. How do I apply a style only to one element but not have other elements inherit it? </p>
  
  <p>Is this the way to do it:  </p>
  
  <pre><code>#element {
     white-space: nowrap;
  }
  
  #element * {
     white-space: initial;
  }
  </code></pre>
  
  <p>Or is there a better way? I would rather it only be one style declaration. </p>
  
  <pre><code>&lt;div id="element"&gt; 
     &lt;div id="other1"&gt;&lt;div&gt;
     &lt;div id="other2"&gt;&lt;div&gt;
     &lt;div id="other3"&gt;&lt;div&gt;
     &lt;div id="other..."&gt;&lt;div&gt;
     &lt;div id="other100"&gt;&lt;div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to apply this to all descendants not merely the first child nodes as other similar posts mentioned but do not answer. </p>