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 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 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