is it possible to override a css class

Question

i have the following jquery code to format a html table.

   $(".jtable td").each(function() {
       $(this).addClass("ui-widget-content");
   });

i want (one on table) to change the text color to blue (its black in the ui-widget-content class. i tried doing this below but it didn't seem to do anything.

Any help on override some particular css for one table (and i want to leave the other tables alone)

   $(".jtable td").each(function() {
       $(this).addClass("ui-widget-content");
       $(this).css("color", "Blue");
   });

Answer 1

Try the !important tool

$(this).css("color", "Blue !important");

http://www.electrictoolbox.com/using-important-css/

Alternatively, just make another class that has the color already set to blue, and apply that class instead.

Answer 2

That selector:

$(".jtable td")

Selects a table-cell that's a descendant of an element of class 'jtable'.

What you're presumably trying to do is select a table with that class:

$('table.jtable')

This will, of course, select all tables of that class. So you'd need to be able to uniquely identify the table you want to select/address. If it's the first table:

$('table.jtable').filter(':first')

Otherwise you'd likely have to apply an id to the one you want to modify.

Answer 3

$("tr:odd").css("background-color", "blue");

Also try looking into .odd and .even selectors if you want to alternate table row colours -

http://api.jquery.com/odd-selector/

Answer 4

A style set with jQuery's css() command should override a style coming from a class, unless the latter has the !important keyword. So something like

$(".jtable td").addClass("ui-widget-content");
$(".jtable:first td").css("color", "Blue");

should suffice (of course :first should be replaced with whatever selector you want). If "ui-widget-content" only sets the text style, you can add it to the table instead of each cell (they will still get it through CSS inheritance rules) which is both faster and more concise:

$(".jtable").addClass("ui-widget-content").find(":first").css("color", "Blue");