row and column selectors
Explanation
This selector probably applies much more to CSS when it is used in conjunction with XML than it does when used in conjunction with HTML. This is because HTML provides the table element, while pure structural languages such as XML do not. CSS2 introduces these selectors as well as additions to the display property and new properties to enable the creation of tabular layout using CSS.
A row selector selects rows of a table, while a column selector selects columns of a table. These selectors are however quite sophisticated, and allow you to select every row or column, a particular row or column, or every second, fifth, or however many columns or rows, starting at a particular row or column.
This is a very advanced feature, and you can safely skip it if you want.
Syntax
Row selectors
A row selector comprises a selector to identify the table (remember that with CSS2 any element can be a table), and a second part that identifies the row or rows selected in that table. For example, the selector for the 3rd row of a table element of class "results" would be
table.results:row[3]
single
To select a single row, the keyword :row, followed by the number of the row in square brackets is appended to the selector for the table. The above is an example of this kind of row selector.
every nth
To select every nth (for example every 3rd or every 70th) row of an element, append :row[%n]. For example table:row[%3] for every third row or table:row[%70] for every 70th row.
You can also nominate the first of the rows to be selected. To select every 3rd row, beginning at the 10th, use the form table:row[%3+10].
As a shorthand, every odd row can be selected with the selector :row-odd, while every even row can be selected with the selector :row-even. For instance table:row-even selects the 2nd, 4th and so on rows of any table.
Column selectors
A column selector comprises a selector to identify the table (remember that with CSS2 any element can be a table), and a second part that identifies the column or columns selected in that table. For example, the selector for the 3rd column of a table element of class "results" would be
table.results:column[3]
single
To select a single column, the keyword :column, followed by the number of the column in square brackets is appended to the selector for the table. The above is an example of this kind of column selector.
every nth
To select every nth (for example every 3rd or every 70th) column of an element, append :column[%n]. For example table:column[%3] for every third column or table:column[%70] for every 70th column.
You can also nominate the first of the columns to be selected. To select every 3rd column, beginning at the 10th, use the form table:column[%3+10].
As a shorthand, every odd column can be selected with the selector :column-odd, while every even column can be selected with the selector :column-even. For instance table:column-even selects the 2nd, 4th and so on row of any table.
Use
Column and row selectors are unlikely to find much use with HTML, as HTML already provides the <table> element, with its <tr>s and <td>s. XML will require the use of the table features of CSS, because XML does not provide a <table> element.
Browser support
Detailed browser support information for this feature can be found in the full version of the Westciv CSS Guide, or in our CSS Browser Support Table.
next: introduction to properties
(C)1997-2001 Western Civilisation Pty. Ltd.