Правильное наследование классов в css?

Question

Я путаюсь с наследованием классов для css. У меня есть это:

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

иногда я хочу изменить цвет и имя класса элемента li, сейчас я делаю это:

#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; 
}

другими словами, все определения одинаковы, за исключением их цвета. Могу ли я сжать его во что-то вроде этого:

#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;
}

? С этим было бы намного приятнее работать. Мое единственное требование - чтобы я мог найти элемент в своем элементе ul по имени класса, поэтому, когда я использую jquery с этим, мне нужно иметь возможность найти элемент с именем класса «li.blue» и т. Д. Мне не нужны эти отдельные классы).

Спасибо

Answer 1

Да, вы можете. Последние правила более специфичны, чем исходные, поэтому они переопределят его.

AFAIK вам больше не нужно cursor:hand.