CODEWITHSUNDEEP
csshtml-tablehtml
user728148
user728148

Reputation: 161

Override span in html css and use TD

I have a span tag inside a <td>. In <td>, I am setting the font by using the class. However, the span has its own font style. I want to override the font styling in the span tag and force the font set in the tag. I am not sure how to do it, hence please advise.

.set_font
{
    font-size:12px;
}
<table>
    <tr>
        <td class="set_font">
           <span style:"font-size:8px;"> This is a test </span>
        </td>
    </tr>
</table>

Upvotes: 3

Views: 10920

Answers (4)

tozlu
tozlu

Reputation: 4865

Edit: For a better explanation of the issue and solutions for different scenarios, please see Jukka's answer below.

Original Answer:

In CSS selectors, the one that is the closest to the actual element is applied. So you should be more specific when using selectors to override the style.

In your example the span element has an inline style which is of the highest specificity.

To gain higher specificity then inline style in an outer element you should use [style] and important.
You can force the one set on td like this:

td.set_font [style] {font-size:120px !important;}

Here is working JSFiddle

Upvotes: 4

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

This is basically the same as Iqbal’s answer but with an explanation of the issue (and a correct explanation, as opposite to the currently accepted answer):

When you need override CSS settings made in a style attribute, and when you cannot modify the HTML source, you need to write a CSS rule that a) refers to the specific element you wish to style (not its parent) and b) uses the !important specifier (which should generally be avoided, but cannot be avoided here). The reason is that in the CSS cascade, any CSS declaration in a style attribute has higher specificity than anything you can get with a CSS rule in a style element or in a linked style sheet. Therefore, the only way to override such a rule is to use !important.

Moreover, you need a rule that applies to the element at hand. Setting properties on the div parent as you have tried cannot possibly help, since the span never inherits a property from its parent when the property has been set on it, in any style sheet.

Thus, for example,

 .set_font span { font-size: 12px !important }

will enforce (to the extent that author style sheets can enforce anything) a 12px font size on the span element. If the span element might on occasion be replaced by some other element, you can use

 .set_font * { font-size: 12px !important }

to make any descendant of the cell take the 12px font size (which is something that you should not be setting, but I digress). To make just any child (direct descendant) have that size, you would use

 .set_font > * { font-size: 12px !important }

(with slightly reduced browser coverage).

Naturally, you put such CSS rules inside a style element or, better, in an external style sheet linked from the HTML document. None of this requires any change in the HTML markup in the td element.

Upvotes: 1

Iqbal Kabir
Iqbal Kabir

Reputation: 1610

Add following CSS.

.set_font span {
    font-size: 12px !important;
}

Upvotes: 4

Cisum Inas
Cisum Inas

Reputation: 12980

Use a seperate class for the span.

css:

.set_font
     {
        font-size:12px;
}

.font2{
    font-size:8px;
}

html:

<table>
 <tr>
 <td class="set_font">
   <span class="font2"> This is a test </span>
 </td>
 </tr>
 </table>

Upvotes: 0

Related Questions