Laying <li> inside another <li>?

Question

I have the following:

<ul id='foo'>
  <li class='fooitem'>
    <ul class='grok'>
      <li class='grokitem'></li>
    </ul>
  </li>
</ul>

I want to style fooitem elements differently than grokitem elements:

#foo li {
  background-color: red;
}

.grok li {
  background-color: green;
}

but the definition of #foo li overrides the definition of .grok li, so everyone appears in red. How to define a style for grok items?

thank

Answer 1

You need a slightly different style rule (currently the first, with an identifier, has a higher level of detail).
You can enable it as follows:

#foo li {
  background-color: red;
}

#foo .grok li {
  background-color: green;
}

You can try here

Answer 2

You can do this by creating a more specific rule:

#foo li {
    background-color: red;
}

#foo .grok li {
    background-color: green;
}

Answer 3

li, , , :

ul.grok li.grokitem
{
    /* your styles here */
}

Answer 4

#foo li {
  background-color: red;
}

#foo .grok li {
  background-color: green;
}

Answer 5

You do not need classes in your example

#foo li { background-color: red; } // All <li>s in foo

#foo li li { background-color: green; } // All <li>s in <li>s in foo