1.7

Adding an ID or class to a table, row or cell
A style sheet contains a bunch of style rules for different elements, that are identified via a CSS
selector. This can be the element's HTML tag (without the angle brackets), ID or class.
When used as a CSS selector, the HTML tag for a table is table. For a row, it is tr and for a cell,
td. A style rule that uses one of these, however, would apply to all tables, rows, or cells. For a
rule to be more specific you need to add an ID (for a unique element) or a class (for a set of
similar elements) to the table, row or cell, and use that as the style rule's selector.
Before you can add an ID or class to a table, row or cell, you have to select that table, row or
cell (see "Selecting a table, row or cell" on page203). After selecting the cell, row or table, type
the ID or class in the respective field on the Attributes pane.
In CSS, refer to the table, row or cell with #ID (where ID should be replaced with the actual ID)
or with .class (where class should be replaced with the actual class).
Styling the first, last and nth rows
The CSS pseudo-classes :first-child, :last-child and :nth-child() are very useful for
styling table rows .
A CSS pseudo-class follows a selector to specify a special state of that selector. It always
starts with a colon.
The pseudo-classes :first-child, :last-child and :nth-child() select an element only if it
is the first, last or nth child element respectively. (In HTML and CSS, the word child refers to an
element inside another element.)
The following CSS style rule selects the table row (tr) that comes first (:first-child) in its parent
(which naturally is a table), and colors its background red:
tr:first-child {
background: red;
}
Selecting a specific row, odd or even rows, or every nth row
The pseudo-class :nth-child() lets you select a specific row, all odd or even rows, or every
nth row.
Page 205