title: Inheritance of css in li, ul and ol. Explanation or reference needed
body: <p>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 &gt; li.</p>
  <p>But when I put color red on ul &gt; 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 &gt; selector). Or just send me a link to somewhere where this is explained!</p>
  <p>Thanks in advance!</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-css lang-css prettyprint-override"><code>ul {
    background-color: red;
  }
  
  ul li {
    background-color: green;
  }
  
  ul&gt;li {
    background-color: blue;
    color: red;
    text-align: center;
  }
  
  ul&gt;li&gt;ol {
    background-color: pink;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;link href="styles.css" rel="stylesheet" /&gt;
    &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat&amp;display=swap" rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div&gt;
      &lt;ul&gt;
        Unsorted List
        &lt;li&gt;
          First Items In Unordered List
          &lt;ol&gt;
            First Ordered List
            &lt;li&gt;First Ordered Item&lt;/li&gt;
            &lt;li&gt;Second Ordered Item&lt;/li&gt;
            &lt;li&gt;Third Ordered Item&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/li&gt;
        &lt;li&gt;
          Second Item In Unordered List
          &lt;ol&gt;
            Second Ordered List
            &lt;li&gt;First Ordered Item&lt;/li&gt;
            &lt;li&gt;Second Ordered Item&lt;/li&gt;
            &lt;li&gt;Third Ordered Item&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/li&gt;
        &lt;li&gt;
          Third Item In Unordered List
          &lt;ol&gt;
            Third Ordered List
            &lt;li&gt;First Ordered Item&lt;/li&gt;
            &lt;li&gt;Second Ordered Item&lt;/li&gt;
            &lt;li&gt;Third Ordered Item&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>