开发者

css - style the edge of the selected area in table

开发者 https://www.devze.com 2023-04-10 13:42 出处:网络
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?

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

精彩评论

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

关注公众号