HTML and CSS Reference
In-Depth Information
Applying Styles to Cells within Rows
You can overcome the limits placed on the CSS styles available to columns and column
groups by using pseudo-classes to identify specific cells within a row. For example, the
selector
tbody tr td:first-of-type
matches all of the data cells listed first in any table body row. To match the cells listed
last, you use the following selector:
tbody tr td:last-of-type
With pseudo-classes, you can apply the full range of CSS styles not available to
columns and column groups. For example, the
text-align
property is not available for
use with columns, but you can use the
last-of-type
pseudo-class to right-align the
contents of the last cell in a row as follows:
tbody tr td:last-of-type {
text-align: right;
}
For other cells, you can use the
nth-of-type
pseudo-class. Thus, the selector
tbody tr td:nth-of-type(7)
matches the seventh cell in the table rows. As long as you don't use spanning cells in
these rows, this will also match the seventh column in the table.
Under Kyle's proposed style rules, the fi rst cell should have a purple background
because row groups take priority over columns or column groups. To verify that this is
the case, add Kyle's proposed styles to the
tables.css
style sheet.
To set the text and background styles in the schedule table:
◗
1.
Return to the
tables.css
file in your text editor. Add the following styles to the
style rule for the
table.schedule
selector:
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
◗
2.
At the bottom of the file, add the following style rule for the header of the sched-
ule table:
/* Table header styles */
table.schedule thead {
background-color: rgb(203, 50, 203);
color: white;
color: rgba(255, 255, 255, 0.5);
}
◗
3.
Finally, add the following style for the first column of the schedule table:
/* Styles for the first column */
table.schedule col.firstCol {
background-color: rgb(255, 255, 192);
}
Figure 5-38 highlights the new style rules in the style sheet.
