Disabling CSS rules

Question

Is there any way to disable a CSS rule?

I ask because I am using Kendo UI, and their rules are very all-encompassing, eg:

.k-grid td
{
   // styles
}

However if I put my table inside their table it will be styled up similarly, so its affecting far too much and needs to be removed/replaced. I don't want to have to manually overwrite the rules and keep up to date with any of kendo's changes. I don't want to have to manually delete it every time I update kendo files either.

Any chance of an easy fix? Thanks

Answer 1

Unfortunately there is no better way to disable a CSS rule for an element that is matched by that rule except by overwriting everything the rule defines.

Answer 2

You will have to override those style attributes in a separate css with !important

.k-grid td
{
   // UI styles
   color:#000;
}

/* your style */
.k-grid td
{
   // styles
   color:#fff !important;
}