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

user_14541367 0
Viewed 688

I was drafting a quick test of how styling works in nested lists in HTML and CSS. I was trying to showcase how the child selector works in difference to the general decendant selector (don't know if that's the correct term) ul li, vs ul > li.

But when I put color red on ul > li, then ONLY the child li in the ul SHOULD get red colored text, but turns out that all text in ul inherits that color. Could someone be so kind and explain to me why this happens with only text properties, for example color, text-align and text-decoration. While properties like background-color and border doesn't get passed down to the grandchildren (as it correctly should work with > selector). Or just send me a link to somewhere where this is explained!

Thanks in advance!

ul {
  background-color: red;
}

ul li {
  background-color: green;
}

ul>li {
  background-color: blue;
  color: red;
  text-align: center;
}

ul>li>ol {
  background-color: pink;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
  <link href="styles.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
</head>

<body>
  <div>
    <ul>
      Unsorted List
      <li>
        First Items In Unordered List
        <ol>
          First Ordered List
          <li>First Ordered Item</li>
          <li>Second Ordered Item</li>
          <li>Third Ordered Item</li>
        </ol>
      </li>
      <li>
        Second Item In Unordered List
        <ol>
          Second Ordered List
          <li>First Ordered Item</li>
          <li>Second Ordered Item</li>
          <li>Third Ordered Item</li>
        </ol>
      </li>
      <li>
        Third Item In Unordered List
        <ol>
          Third Ordered List
          <li>First Ordered Item</li>
          <li>Second Ordered Item</li>
          <li>Third Ordered Item</li>
        </ol>
      </li>
    </ul>
  </div>
</body>
<script src="script.js"></script>

</html>

css html
2 Answers

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.

Dorward_190680

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.

user_64029560
Related