css - style the edge of the selected area in table
I have a selectable table (jQuery UI selectable). How do i "access" the edge (top, left, right, bottom) width css, or do I have to use javascript?
Update: with "accessing the edge" I mean for example create a border around a selected area in a table (select td elements, first .ui-selected in tr, last .ui-selected in tr, first tr containing .ui-selected, last tr containing .ui-selected).
<table class="ui-selectable">
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee ui-selected"></td>
<td class开发者_JAVA百科="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
</tr>
</table>
ex: the left edge
.ui-selected {
border-left: 1px solid #00F;
}
.ui-selected ~ .ui-selected {
border-left: none;
}
Left:
td:first-child
Right:
td:last-child
Top:
tr:first-child td
Bottom:
tr:last-child td
Edit: with your updates, I can now state that there is no way to do it in CSS3. But CSS4's :nth-match
and :nth-last-match
(not implemented anywhere at the time of writing, and the spec is only a working draft) will be able to do it.
精彩评论