Styling HTML Child Lists

Question

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.

Did you mean to put your nested `ul` inside the `li`? You can't place a `ul` as a child of a `ul`. — ksav, Feb 12 '20 at 04:17
@ksav You can and it's how you're supposed to style child lists. — Spedwards, Feb 12 '20 at 04:22
Take a read of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul under the Permitted content section. — ksav, Feb 12 '20 at 04:38
Also this is relevant https://stackoverflow.com/a/11755657/5385381 — ksav, Feb 12 '20 at 04:42

kzhao14 · Accepted Answer · 2020-02-12T04:18:28.597

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.

edited Feb 12 '20 at 04:18

answered Feb 12 '20 at 04:11

kzhao14

2,470
14
21

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 '20 at 04: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 elements that are inside a
element.`. In this case, that means that `li li` will only select `li`s that are inside another `li`, which none of yours are.
– kzhao14 Feb 12 '20 at 04: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 `
`. See: https://codepen.io/Spedwards/pen/ZEGbprq
– Spedwards Feb 12 '20 at 04:21
@Spedwards and that's what I'm saying. `li li` only applies to `li`s 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 '20 at 04:22
They are within the `li` in the same way the `ul` is within `main` in the example of `
`.
– Spedwards Feb 12 '20 at 04:24
@Spedwards No, it's not. Take a look at your code. You have `
foo

bar

kzhao14

Feb 12 '20 at 04:24

Well crap. Now I feel stupid. My live code uses the correct format of `

– Spedwards Feb 12 '20 at 04:26

@Spedwards Haha, no worries. We all make mistakes; sometimes it just takes someone pointing at it with 4 hands for you to see :) – kzhao14 Feb 12 '20 at 04:27

score 1 · Answer 2 · answered Feb 12 '20 at 04:26

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.

score 0 · Answer 3 · answered Feb 12 '20 at 06:50

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.

Styling HTML Child Lists

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.

3 Answers3