CSS and last td selection

Summary: Each row of data lines has 2 td's, and their first td can be applied to the left border. But the second one (so the right cell of the tr field (row)) could not be applied. Even I tried

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

      

or

.dvRowOdd td:last-of-type

      

Now my complete post is:

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

I have finished the header and footer. The first td cell (using them for labeling) has a 1px solid border (with a background image), but the next td cell (using to position controls like textbox, dropdown, etc.) cannot be applied with one and the 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 added all the styling.

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

      

-1


a source to share


1 answer


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



+1


a source







All Articles