Graphics Programs Reference
In-Depth Information
But back up a bit and consider a somewhat unusual way to style columns, one that requires no
classes at all. First, strip all those classes out of the markup.
<
table>
<
tbody>
<
tr>
<
td>Row
1
cell
1</
td>
…
<
td>Row
1
cell
5</
td>
</
tr>
<
tr>
<
td>Row
2
cell
1</
td>
…
<
td>Row
1
cell
5</
td>
</
tr>
</
tbody>
</
table>
Now, how do you style just the second column? With
:first-child
and the adjacent-
sibling combinator.
td:first-child
+
td
{
border
:
2px
solid
#000
;
border-width
:
0
2px
;}
tr:first-child
td:first-child
+
td
{
border-top-width
:
2px
;}
tr:last-child
td:first-child
+
td
{
border-bottom-width
:
2px
;}
214
In this approach, styling the i rst column means just using
td:first-child
(since you're
selecting all the table cells that are the i rst children of their
tr
parents). Any column at er
that is selected by adding n-1 instances of
+ td
. So if you want to shit that border to the
fourth column (see Figure 6-8):
td:first-child
+
td
+td
+
td
{
border
:
2px
solid
#000
;
border-width
:
0
2px
;}
tr:first-child
td:first-child
+
td
+
td
+
td
{
border-top-width
:
2px
;}
tr:last-child
td:first-child
+
td
+
td
+
td
{
border-bottom-width
:
2px
;}
Figure 6-8: Using child and sibling selectors to style a “column.”
Clumsy or elegant? Depends on your aesthetics, I suppose.
Search WWH ::
Custom Search