title: CSS rule not applied as expected
body: <p>I have the below code. The first 'ul' tag with id 'selected-plays' has 3 child 'li' tags (not descendants). I am trying to apply few CSS rules to these child tags.</p>
  
  <p>My jQuery code adds the class 'horizontal'. Notice that the selector points to only the child tags of the parent element with id <code>#selected-plays</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#selected-plays &gt; li').addClass('horizontal');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.horizontal {
    margin: 10px;
    float: left;
    list-style: none;
    color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul id="selected-plays"&gt;
    &lt;li&gt;Comedies
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="/asyoulikeit/"&gt;As You Like It&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;All's Well That Ends Well&lt;/li&gt;
        &lt;li&gt;A Midsummer Night's Dream&lt;/li&gt;
        &lt;li&gt;Twelfth Night&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Tragedies
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="hamlet.pdf"&gt;Hamlet&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;Macbeth&lt;/li&gt;
        &lt;li&gt;Romeo and Juliet&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Histories
      &lt;ul&gt;
        &lt;li&gt;Henry IV (&lt;a href="mailto:henryiv@king.co.uk"&gt;email&lt;/a&gt;)
          &lt;ul&gt;
            &lt;li&gt;Part I&lt;/li&gt;
            &lt;li&gt;Part II&lt;/li&gt;
            www.it-ebooks.info Chapter 2 [ 29 ]
          &lt;/ul&gt;
          &lt;li&gt;&lt;a href="http://www.shakespeare.co.uk/henryv.htm"&gt;
       Henry V&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;Richard II&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The first 3 properties (margin, float, list-style) are applied to the three child 'li' tags as expected but the last property i.e., color is applied to all the elements (descendants) within the parent element. Why is this happening?</p>