Their current styles
are the right and bottom borders we added to the ths and tds in the
?¬? rst step. Let??™s start with the ths.
First, we need to target the right border of the last cell of the heading??™s
row (the last th with the scope of row) and the bottom border of
the heading??™s column (the last th with the scope of col).
table.tic_tac_toe th[scope="col"]:last-child {
border-right:0;
}
table.tic_tac_toe tr:last-child th {
border-bottom:0;
}
Now let??™s remove the bottom borders of the last row of the table
(actually of that row??™s cells??”the tds) and the right borders of the last
column of tds, as shown in Figure 6.11.
FIGURE 6.11 The bottom borders
are removed from the bottom row
of cells, and the right borders are
removed from the right-most column
of cells.
table.tic_tac_toe tr:last-child td {
border-bottom: 0;
headings row
last cell of labels column
DESIGNING INTERFACE COMPONENTS 187
}
table.tic_tac_toe td:last-child {
border-right:0;
}
The ?¬? rst selector targets the cells of the last row of the table. The
second selector simply needs to say td:last-child because the last
cell of each row is a last child; its parent is the table row. Here??™s the
?¬? nished code. The selectors are in a slightly different order from
the step-by-step, partly for clarity and partly because some of them
need to be where they are to override preceding styles.
Pages:
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225