-2

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.

5

3 Answers 3

3

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.

8
  • 1
    li li styles a li element anywhere below another li element. If it was li > li then you would be correct but that is not the case. Change the selectors to li > ul > li and you'll see the problem still persist.
    – Spedwards
    Feb 12, 2020 at 4:15
  • @Spedwards Actually, I am correct. From MDN: The (space) combinator selects nodes that are descendants of the first element. Example: div span will match all <span> elements that are inside a <div> element.. In this case, that means that li li will only select lis that are inside another li, which none of yours are.
    – kzhao14
    Feb 12, 2020 at 4:18
  • I don't think you understand how CSS selectors work. The selector main ul will apply styles to the element ul where it sits in the tree <main><div><ul>. See: codepen.io/Spedwards/pen/ZEGbprq
    – Spedwards
    Feb 12, 2020 at 4:21
  • @Spedwards and that's what I'm saying. li li only applies to lis that are inside another li. In your case, all of the children list li are not within another li. That's why it doesn't work, and ul ul works - because the children ul are inside the parent ul.
    – kzhao14
    Feb 12, 2020 at 4:22
  • They are within the li in the same way the ul is within main in the example of <main><div><ul>.
    – Spedwards
    Feb 12, 2020 at 4:24
1

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.

0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.