CSS rule not applied as expected

Question

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.

My jQuery code adds the class 'horizontal'. Notice that the selector points to only the child tags of the parent element with id #selected-plays

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

.horizontal {
  margin: 10px;
  float: left;
  list-style: none;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:[email protected]">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
          www.it-ebooks.info Chapter 2 [ 29 ]
        </ul>
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">
     Henry V</a></li>
        <li>Richard II</li>
    </ul>
  </li>
</ul>

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?

Answer 1

This is expected behaviour as child elements will automatically inherit the color setting of their parent. If you do not want this behaviour you can set the color of the children in CSS:

#selected-plays li li {
  color: initial;
}

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

.horizontal {
  margin: 10px;
  float: left;
  list-style: none;
  color: red;
}

#selected-plays li li {
  color: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:[email protected]">email</a>)
        <ul>
          <li>Part I</li>
          <li>Part II</li>
          www.it-ebooks.info Chapter 2 [ 29 ]
        </ul>
        <li><a href="http://www.shakespeare.co.uk/henryv.htm">
     Henry V</a></li>
        <li>Richard II</li>
    </ul>
  </li>
</ul>