1.6

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.
:nth-child(3n+1) matches child elements 1, 4, 7, 10 etc., so every third element, starting at 1.
Via script (based on a data field value)
To style a table, row or cell based on a data field value, you have to write a script (see "Writing
your own scripts" on page221).
First add an ID or class to the table, row or cell that needs to be styled: select the element (see
"Selecting a table, row or cell" on page185) and add an ID on the Attributes pane. Then
create a script, using that ID or class as the script's selector. The script can be very simple:
if (record.fields.COUNTRY == 'CANADA') {
results.css('color','green');
}
Page 187