Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Selecting all rows but the last of class with CSS3

Selecting all rows but the last of class with CSS3

Problem

I am trying to select all elements in the rows of a certain Class except the last Row of that class. I have been trying to figure out the correct syntax to do so, but I just can't figure it out.

Here is the CSS I was thinking would do the job:

tr.ListRow:not(:last-of-type) td {
    padding: 14px;
    border-bottom-color: #768ca5;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

Here is the HTML so you can get an idea of what I am trying to do.

.......................................................... 
    .
    .
    .
    .
    ..................

Edit: I ended up going a javascript route in which I answered below.

Problem courtesy of: Justin

Solution

Since others pointed out this is not possible with a single selector, I opted to use jQuery to accomplish this task.

function RemoveLastRowBotBorder() {
    var rows = $(".ListRow");
    $(rows[rows.length - 1]).removeClass("ListRow");
}
Solution courtesy of: Justin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Selecting all rows but the last of class with CSS3

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×