That’s because using li li means a child li of an li. So in this case, that would apply to the second li below:

<li>
    <li>foo</li>
<li>

However, in your example, the nested lists are not inside an li, but instead by themselves, so they are not the children of any li.

In your HTML, LIs are not getting nested in the LIs (they are not within each other – <li><li>...</li></li>. Hence, the styling of. li li {...} won’t work at all.

The way your HTML is, it is nesting ULs. Hence, ul ul {...} styling will work.

Remember, in CSS to make li li work they should be nested within each other otherwise CSS won’t work.

I would recommend just creating classes like .green .red .blue .purple and adding those classes to the <li> tags, because it has better re-usability.

I would recommend you to go trough the essentials of HTML5 again & work on your style of coding.

P.S Regarding your problem, here’s another Stack that explains how to properly nest lists.

I was testing list-style-type changes for child lists and noticed something strange happening. When you try and change the properties of a child list by using a selector like li li it will not work. If you remove the topmost selector in my below example, all styles are removed. If you inspect the element, the styles aren’t being applied at all so it’s not as though something is overwriting them.

li {
  color: purple;
}
li li {
  color: red;
  list-style-type: circle;
}
li li li {
  color: blue;
  list-style-type: lower-roman;
}
li li li li {
  color: green;
  list-style-type: square;
}

<ul>
  <li>Parent List</li>
  <ul>
    <li>1st Child</li>
    <ul>
      <li>2nd Child</li>
      <ul>
        <li>3rd Child</li>
      </ul>
    </ul>
  </ul>
</ul>

When you replace li with ul, it works as you’d expect the above to. Why does all of this happen? I’ve never seen behaviour like this before.

ul {
  color: purple;
}
ul ul {
  color: red;
  list-style-type: circle;
}
ul ul ul {
  color: blue;
  list-style-type: lower-roman;
}
ul ul ul ul {
  color: green;
  list-style-type: square;
}

<ul>
  <li>Parent List</li>
  <ul>
    <li>1st Child</li>
    <ul>
      <li>2nd Child</li>
      <ul>
        <li>3rd Child</li>
      </ul>
    </ul>
  </ul>
</ul>

I am voting to close this as I’m an idiot and that’s the extent of this. I’d hope you vote to close as well.