Question

I have the following table* column and class, and yet when the table is rendered in Firefox, the class is missing.

<td class="item-template-readmore">
    <a href='Detail.aspx?id=<%# Eval("id") %>'>Read More</a>
</td>

.item-template-readmore
{
    color: Red;
}

Yet, when I have this combination of column and class, the class is present in the browser.

<td class="item-template-name">
    <%# Eval("Name") %>
</td>

.item-template-name
{
    color: Red;
}

Logically this is wrong. The only difference I can see is that the ‘operational’ column doesn’t have child elements (except for text), and I know this is the rabbit hole of CSS, but surely the styling on the containing element shouldn’t even be aware of the contained elements?

• Tables, I know, ain’t it evil 🙂

Answer 1

As @meder implies, it’s not that the table cells are aware of their content, it’s that the contents are aware of their own existence. The a elements apply their own styles, therefore instead of styling the table cell you should style the a:

a {
color: red;
}

Assuming that you want differentiation between the various states of the a:

a:link,
a:visited {
 /* for non-hovered/active states */
}

a:hover,
a:active,
a:focus {
 /* for the more (inter-) active states */
}

You can also preface these styles with table and/or the column’s class to increase specificity:

table a:link,
table a:visited,
table .item-template-readmore a:link,
table .item-template-readmore a:visited {
 /* styles */ 
}

You could also, if you wanted to, use inherit to force the a elements to inherit properties from their parent element:

a {
  color: inherit;
  background-color: inherit;
  font-family: inherit;
  /* and so on... */
}