Styling an <li> within another <li>?

Question

Hi,

I have the following:

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

I want to style the fooitem elements differently than the grokitem elements:

#foo li {
  background-color: red;
}

.grok li {
  background-color: green;
}

but the #foo li definition is overriding the .grok li definition, so all are appearing red. How do I define a style for the grok items?

Thanks

Answer 1

You can do it by creating a more specific rule like so:

#foo li {
    background-color: red;
}

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

Answer 2

Since your lis appear to have classes assigned to them, you can target them specifically, like so:

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

Answer 3

You need a slightly different style rule (currently the first, with an ID, has a greater level of specifity).
You can resolve it like this:

#foo li {
  background-color: red;
}

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

You can give it a try here

Answer 4

#foo li {
  background-color: red;
}

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

Answer 5

You don't need any 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