开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜