CSS and selecting last td

Question

Summary: Every field rows of detailsview have 2 td and their first td can apply left border. But second one (so the rightest cell of field tr(row)) couldn't applied. Even i tried

.dvRowEven td:nth-last-child(even)

or

.dvRowOdd td:last-of-type

Now my full message:

Hi,

I am trying to write css for DetailsView (asp.net control).

I finished the header and footer. The first td cell (using them for labeling) has 1px solid border (with background image) but next td cell (using for placing controls like textbox, dropdownlist etc.) couldn't applied with same image with:

.dvRowEven td:nth-last-child(even)
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
.dvRowOdd td:last-of-type
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
    background-color:Yellow;
}

css style. I've added whole style, thanks in advices from now.

body
{
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-image: url('../images/bkg_topleft.jpg');
    background-position: left top;
    padding: 10px 0 0 10px;
    background-color: #f8f7f2;
    text-align: left;
}
.dv
{
    font-family: Trebuchet MS;
    text-align: left;
    background-image: url('../images/dv/dvAll.gif');
    background-repeat: repeat-x;
    -moz-border-radius: 75px;
    background-color: white;
    width: 350px;
    margin: 0 10px;
}
.dvHeader
{
    /*---------- HEADER ---------------*/
    border: 0;
    vertical-align: top;
}
.dvHeaderLeft
{
    float: left;
    width: 8px;
    height: 50px;
    background-image: url('../images/dv/headerLeft_50.gif');
    background-repeat: no-repeat;
    background-position: left top;
    border: 0;
    vertical-align: top;
}
.dvHeaderCenter
{
    float: left;
    height: 30px;
    padding: 10px;
    text-indent: 5px;
    font-size: 15px;
}
.dvHeaderRight
{
    float: right;
    width: 8px;
    height: 50px;
    background-image: url('../images/dv/headerRight_50.gif');
    background-repeat: no-repeat;
    background-position: right top;
    border: 0;
    vertical-align: top; /*---------- BİTTİ HEADER ---------------*/
}
.dvCommandRow td
{
    border-right: solid 1px #B4B4B2;
    border-left: solid 1px #B4B4B2;
    text-align: right;
    padding: 5px;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
.dvCommandRow td a
{
    color: #3e6d8e;
    background-color: #e0eaf1;
    border: 1px solid #7f9fb6;
    margin-top: 2px;
    margin-right: 2px;
    margin-bottom: 2px;
    margin-left: 0pt;
    padding-top: 3px;
    padding-right: 4px;
    padding-bottom: 3px;
    padding-left: 4px;
    text-decoration: none;
    font-size: 90%;
    line-height: 2.2;
    white-space: nowrap;
}
.dvCommandRow td a:hover
{
    background-color: #3e6d8e;
    color: #e0eaf1;
    border: 1px solid #33ccff;
    text-decoration: none;
}
.dvFooter
{
    /*---------- FOOTER ---------------*/
    background-image: url('../images/dv/dvFooterCenter.gif');
    background-repeat: repeat-x;
    background-color: transparent;
    background-position: left top;
    border: 0;
    height: 6px;
    vertical-align: top;
}
.dvFooterLeft
{
    float: left;
    width: 8px;
    height: 6px;
    background-image: url('../images/dv/dvFooterLeft.gif');
    background-repeat: no-repeat;
    background-position: left top;
    background-color: Transparent;
    border: 0;
    vertical-align: top;
}
.dvFooterCenter
{
    float: left;
    height: 6px;
    background-image: url('../images/dv/dvFooterCenter.gif');
    background-repeat: repeat-x;
    border: 0;
    vertical-align: top;
}
.dvFooterRight
{
    float: right;
    width: 8px;
    height: 6px;
    background-image: url('../images/dv/dvFooterRight.gif');
    background-repeat: no-repeat;
    background-position: right top;
    border: 0;
    vertical-align: top; /*---------- BİTTİ FOOTER ---------------*/
}
.dvEmptyDataRow
{
    border-right: solid 1px #B4B4B2;
}
.dvRowEven td:nth-last-child(even)
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}
.dvRowOdd td:last-of-type
{
    border-right: solid 1px #B4B4B2;
    padding-left: 5px;
    padding-bottom: 3px;

    background-position:right top;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
    background-color:Yellow;
}
.dvField
{
    border-left: 1px solid #B4B4B2;
    padding: 0 5px;
    font-weight: bold;
    font-style: normal;
    text-align: right;
    background-image: url('../images/dv/tdLeftBorder.gif');
    background-repeat: repeat-y;
}

Answer 1

Support for the first/last element CSS rules is flaky and not standardized across all browsers. The best compromise I've found is to add in an extra ".last" class to the CSS and stick the class in the last TD with server-side code.