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?

Rory McCrossan · Accepted Answer · 2018-05-15 07:05:15Z

12

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>

answered May 15, 2018 at 7:05

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rory McCrossan Over a year ago

@SamiKh don't forget to accept an answer if it helped. This also applies to all your previous questions as I note you've not yet accepted an answer on any of them.

Nikhil Aggarwal · Accepted Answer · 2018-05-15 07:07:10Z

3

Inherited properties

FROM MDN

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary. A typical example of an inherited property is the color property.

You can simply add color:initial style to the child elements to preserve the styles. The selector can be pre-specified in css or can be added via script as well. You can have different selectors based on the structure e.g. li > *, li > li or li li, etc.

answered May 15, 2018 at 7:07

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Comments

Gherkin · Accepted Answer · 2018-05-15 07:08:11Z

0

The child <li> tags are inheriting the color value from the parent <li> tags that have the .horizontal class. You can try over-riding the child tag color by adding a style rule such as:

.horizontal li { color: initial; }

answered May 15, 2018 at 7:08

Gherkin

3233 silver badges11 bronze badges

Collectives™ on Stack Overflow

CSS rule not applied as expected

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related