Proper class inheritence in css?

Question

Hi,

I'm getting confused with class inheritance for css. I have this:

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

sometimes I want to change the color and class name of a li element, right now I'm doing this:

#grok li, .red {
  background-color: red;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer;
  text-align: left;
}

#grok li.green {
  background-color: green;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer;
}

#grok li.blue {
  background-color: blue;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer; 
}

in other words, all the definitions are the same except for their color. Can I compact it into something like this:

#grok li {
  background-color: white;
  margin: 5px; 
  padding: 5px;
  cursor: hand;
  cursor: pointer;
  text-align: left;
}

#grok li.red {
  background-color: red;
}

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

#grok li.blue {
  background-color: blue;
}

? That would be a lot more pleasant to work with. My only requirement is that I be able to find an element in my ul item by class name, so when I'm using jquery with this, I need to be able to find an element with class name 'li.blue' etc (otherwise I wouldn't need these separate classes).

Thanks

Answer 1

Yes, you can. The latter rules are more specific than the initial, so they will override it.

AFAIK you don't need cursor:hand anymore.