override inline css with jquery and/or css

Question

How do I remove the font size and the bold code with jquery and/or css. I tried a variety of methods but cannot seem to get it.

I tried adding a class and then styling it via css and !important but that only worked if I put font-weight:lighter, I cannot seem to override the inline css so I said why not simply remove it.

The selector I have to add the class is

$("td[width='6%'][valign='CENTER']").addClass('quantity_box')

Here is the code ( I do not have access to it)

<td width="6%" valign="CENTER" bgcolor="#f9f9f9"><font size="4"><b>2</b></font>

Answer 1

Adding more specific CSS rules to target both the font and b tags will allow you to override the inline styles. Set the values to your appropriate values.

.quantity_box font { font-size: 10px; }
.quantity_box font b { font-weight: normal; }

Answer 2

$("b").remove(":contains('2')");