Question

I have been forced to use !important in css. There is probably another way to get this done, but I am doing it because I only want a specific subset of an already styled class to have a different style. The situation is with jQuery’s datepicker. In datepicker, I am setting certain days to have different priority colors. This end result is that the td element holding the <a> which holds the date gets the class name

.date-priority > a
{
 background: url("") red;
 border: 1px solid yellow;
}

However, this change gets overridden because there is a more specific rule for that anchor tag, it specifically has a class on it. I do not want to change all elements with that class, only to override a few of them. So, I decided to use !important in the previous definition

.date-priority > a
{
 background: url("") red !important;
 border: 1px solid yellow !important;
}

It works. But it just does not seem to be best practice. Is using !important a hack in general, and more specifically in this instance?

HTML:

<td onclick="
 DP_jQuery_1348602012259.datepicker._selectDay('#date',8,2012, this);
 return false;" 
 title="Available" class=" ui-datepicker-week-end date-priority">
  <a href="#" class="ui-state-default">29</a>
</td>

Answer 1

If this is the case, just add a separate rule for those elements:

.date-priority > a,.date-priority > a.className {
 background: url("") red;
 border: 1px solid yellow;
}

Demo: http://jsfiddle.net/Blender/rCyjV/

The only reason !important is frowned upon is because it makes future additions to the CSS possibly frustrating.