Inheritance of css in li, ul and ol. Explanation or reference needed

Properties are inherited when they have the value inherit.

The default stylesheets provided by browsers have inherit as the default value for properties where it would generally be considered useful.

It is useful that given:

<p style="color: blue">The quick <em>brown</em> fox jumped over the lazy dog.</p>

… the em element inherits the colour instead of forcing you to respecify it.

It isn't useful for a background to be inherited because that would layer over the top of the previous one. A background image would restart on the em element while a translucent background colour would multiply the opacity of its parent.


Let's divide your question into 2 parts,

  1. what exactly ul > li means?

For CSS color property, it doesn't mean the first children of ul only, it also means some elements & their properties inside the children unless you set different color for them, for example-

<style>
  ul > li {
    color: red;
  }
</style>

<ul>
  <li>HOME</li>
  <li> MY ROOMS
    <ul>
      <li>BED ROOM</li>
      <li>KITCHEN</li>
    </ul>
  </li>
  <li>GARDEN</li>
</ul>

The color: red; is applied not only to ul > li but also to ul > li > ul > li. Now, if you set a different color for them, then they will not inherit the color from ul > li anymore, see the example below-

<style>
ul > li {
color: red;
}
  ul > li li {
    color: green;
    border-width: 1px;
    border-style: solid;
  }
</style>

<ul>
  <li>HOME</li>
  <li> MY ROOMS
    <ul>
      <li>BED ROOM</li>
      <li>KITCHEN</li>
    </ul>
  </li>
  <li>GARDEN</li>
</ul>

As you can see the child list items color is different now. You can also see the border around them and their color, here comes the second part of your question-

  1. Is CSS color property applicable to text only?

The answer is NO, if CSS color property is applied to an element, it means it's also applied to the following properties of following children of that element-

  • The text color of the value of alt attribute (of img tag which is a child of that element)
  • The border-color of ul, ol & li (which are children of that element)
  • The list-style-type color of li (which is a child of that element)

Now, see the example below-

<style>
  div {
    width: 400px;
    margin: 20px auto;

    /* color */
    color: green
  }

  ol li,
  ul {
    border-width: 1px;
    border-style: solid;
  }
</style>

<div>
  <img src="01.jpg" alt="This is a missing img tag">
  <br>
  <br>
  <ul>
    <li>Lorem, ipsum dolor.</li>
  </ul>
  <br>
  <ol>
    <li>Lorem ipsum dolor sit.</li>
  </ol>
</div>

I have learned this from some tutorial I forgot but after some googling I found an article that could be more useful for you, and this is a w3school page you can learn more about CSS selectors from here, good luck.

Tags:

Html

Css

Recent Posts