1.7

Table Of Contents
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 (especially in Dynamic Tables).
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.
Between the round brackets in :nth-child() you can fill in a number, odd or even, or a formula:
an+b. In the formula, a represents a cycle size (every...), n is a counter (for the child elements),
and b is an offset value ('start at b'). The following examples will make this clear.
:nth-child(3) matches just one element: the third child element.
:nth-child(odd) matches child elements 1, 3, 5, 7, etc. The keyword odd substitutes the
expression 2n+1, which in other words says: 'take every second element, starting at 1'.
:nth-child(even) matches child elements 2, 4, 6, 8, etc. The keyword even substitutes the
expression 2n+0, or simply 2n.
:nth-child(3n) matches child elements 3, 6, 9, 12 etc.
Page 508