9.
As noted, this is also the total extent to which IE, with its almost
nonexistent pseudo-class support, can render this example. On to
the more compliant browsers.
Let??™s deal with the top row next. You can see that I need to get a
thicker line under the headings row and have every right border on
the headings be thin, except for the ?¬? rst one. Let??™s add a couple of
selectors to do that (see Figure 6.10).
table.tic_tac_toe th[scope="col"] {
border-right:1px solid #99CCCC;
border-bottom:3px solid #99CCCC;
}
table.tic_tac_toe th[scope="col"]:?¬? rst-child {
border-right:3px solid #99CCCC;
}
FIGURE 6.10 The borders on the
heading rows are now styled.
labels column (and headings until
we override below)
headings row
?¬? rst cell of headings row
STYLIN??™ WITH CSS - CHAPTER 6 186
I use an attribute selector to target the top row??”the th cells with col
scope??”to set all their right borders to 1 pixel and the left borders to
3 pixels. Then I need to get the right border of just the ?¬? rst cell of the
?¬? rst row to go back to being 3 pixels. To target just this cell, I combine
an attribute selector with the ?¬? rst-child pseudo class, like this:
th[scope="col"]:?¬? rst-child, which means ???the ?¬? rst th with the
scope of col???, and then I style its right border to be 3 pixels thick.
All that??™s now left to do is to take the bottom and right border off the
bottom and right cells of the table, respectively.
Pages:
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224