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.
|