title: Applying styles from CSS to newly appended elements
body: <p>I add an element to a parent div dynamically.</p>
  
  <pre><code>$('.some_div').append("&lt;li class="hi"&gt;hey!&lt;/li&gt;")
  </code></pre>
  
  <p>In my CSS, </p>
  
  <pre><code>.hi {
    color: white;
  }
  </code></pre>
  
  <p>However, since <code>&lt;li class="hi"&gt;</code> is dynamically added, it seems the styles defined in CSS are not applied to the element. So,</p>
  
  <pre><code>$('.some_div').append("&lt;li class='hi'&gt;hey!&lt;/li&gt;")
  $('li.hi').css({"color":"white"});
  </code></pre>
  
  <p>would actually do the trick, but it seems redundant to me as the style is already defined in CSS file. Is this the only way to do it?</p>
  
  <p><strong>Update:</strong></p>
  
  <pre><code>$('.some_div').append('&lt;li style="color:white" &gt;hey!&lt;/li&gt;')
  </code></pre>
  
  <p>The above will work, but since the style is already defined in a separate CSS file, it'd be still redundant. My question was if there is a way to avoid this redundancy.</p>
  
  <p>in CSS,</p>
  
  <pre><code>.some_div &gt; li {
    font-size: 20px;
    background-color: 30px;
    margin-right: 2px;
  }
  
  .hi {
    color: white;
  }
  </code></pre>
  
  <p>All of this won't be applied when I add a new element via <code>($).append()</code>, so I am asking if there is a way to apply the styles that are already defined in a stylesheet, without having to re-defining them in a <code>css()</code> function. </p>