title: JQuery dynamically added DOM loses (doesn't) CSS style
body: <p>I'm having a problem where in JQuery, dynamically added DOM nodes don't take styles defined in a CSS file. </p>
  
  <p>I've looked around, and <a href="https://stackoverflow.com/questions/9134451/loading-table-dynamically-loses-style-rules">the answers I've seen</a>, don't fix the problem. Ie, the relevant CSS is in a path relative to the host page. It is definitely in memory. But if I use A) or B), the 'newNode' appended or loaded, does not take the styles that are already loaded.</p>
  
  <p>A) <code>$("#some-selector").append(newNode);</code></p>
  
  <p>B) <code>$("#some-selector").load("/path/to/newNode.html");</code></p>
  
  <p>I find that I have to manually add the style like </p>
  
  <p>C) <code>$(".loadedElement").css('some-style','some-value');</code></p>
  
  <p>Has anyone solved this? </p>
  
  <p>Thanks in advance. </p>
  
  <p>--- EDIT </p>
  
  <p>So I got a bit further. I had an HTML like A) and CSS like B). It turns out that the nested CSS selector wasn't matching the nodes I wanted. I had to go down to a selector as in C). Then my dynamic nodes have the style applied. But I really would prefer to have something like B). Is my CSS off? </p>
  
  <p>A) </p>
  
  <pre><code>&lt;div id='6bullet-container'&gt;
    &lt;input id='six-bullet-image-upload' name='convert' type='file'&gt;
      &lt;div class='six-bullet-content-wrapper'&gt;
        &lt;div class='six-bullet-container-label'&gt;
          click to upload
        &lt;/div&gt;
        &lt;div id='six-bullet-title'&gt;&lt;/div&gt;
        &lt;div class='six-bullet-bullet' id='six-bullet-one'&gt;&lt;/div&gt;
        &lt;div class='six-bullet-bullet' id='six-bullet-two'&gt;&lt;/div&gt;
        &lt;div class='six-bullet-bullet' id='six-bullet-three'&gt;&lt;/div&gt;
        &lt;div class='six-bullet-bullet' id='six-bullet-four'&gt;&lt;/div&gt;
        &lt;div class='six-bullet-bullet' id='six-bullet-five'&gt;&lt;/div&gt;
        &lt;div class='six-bullet-bullet' id='six-bullet-six'&gt;&lt;/div&gt;
     … 
  </code></pre>
  
  <p>B)</p>
  
  <pre><code>#6bullet-container #six-bullet-image-upload .six-bullet-content-wrapper .six-bullet-bullet {
     my: style;
  }
  </code></pre>
  
  <p>C) </p>
  
  <pre><code>.six-bullet-bullet {
      my: style;
  }
  </code></pre>