Question

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="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;
}

Answer 1

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.