Recipe 6.3 Setting the Styles Within Table Cells

Recipe 6.3 Setting the Styles Within Table Cells

Problem

You want to stylize links within a table cell to make them appear visually different from the rest of the page.

Solution

Use a descendant selector (sometimes referred to as a contextual selector ) to manipulate the styles for content in a table cell:

 td a {  display: block;  background-color: #333;  color: white;  text-decoration: none;  padding: 4px; } 

Discussion

By using the type and descendent selectors ‚ the td a in the CSS rule ‚ to apply the styles, you reduce the amount of markup needed to perfect your designs and you reduce the document's file sizes. The style affects only the a elements within the table cells, td .

If you need more control over the design of the content within a table cell, use a class selector:

 <td class="navText">  <a href="/">Home</a> </td> 

You then can apply the CSS rules to the cell's content through a combination of class and descendant selectors:

 td.navText {   font-size: x-small; } 

See Also

The CSS 2.1 specification regarding type selectors at http://www.w3.org/TR/CSS21/selector.html#type-selectors; http://www.w3.org/TR/CSS21/selector.html#descendant-selectors for information about descendant selectors.