Selecting all rows but the last of class with CSS3

Question

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.

<tbody>
    <tr class="Row ListRow">..........</tr> <!-- CSS applied to <td> tags within -->
    <tr class="Graph">..........</tr> 
    <tr class="AltRow ListRow">........</tr> <!-- CSS applied to <td> tags within -->
    <tr class="Graph">..........</tr> 
    <tr class="Row ListRow">..........</tr> <!-- CSS applied to <td> tags within -->
    <tr class="Graph">..........</tr> 
    .
    .
    .
    .
    <tr class="AltRow ListRow">........</tr> <!-- CSS NOT applied to this last row of class ListRow -->
    <tr class="Graph">..........</tr> 
</tbody>

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

`.xyz:last-child` will not fetch all elements with the class of `xyz` then find the last one in that set, it's the other way around, it will grab the last child then if that has a class of `xyz` it will match. Same goes for :last-of-type, nth-child and all the rest. So there's no way to find the last element with a certain class. — Matt Kieran, Nov 08 '12 at 16:36

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

It is currently not possible to select the last occurring element of a given class, or all elements of a class except the last one, using CSS. :last-of-type won't work here because it means "the last tr element", not "the last element that matches this compound selector", and your last tr.ListRow is not the last tr.

The nature of sibling combinators makes it possible to use an override rule for the first element of a certain class. However this is not doable for the last one.

You're going to have to add a special class to the last tr.ListRow, like Last, and select tr.ListRow:not(.Last), or find a different way around this.

See also: Is it possible using current browsers to use pseudo-classes to detect first and last of a certain class?

edited May 23 '17 at 11:56

Community

1
1

answered Nov 08 '12 at 16:57

BoltClock

700,868
160
1,392
1,356

It's probably good to note that ":not" does not work on IE as of yet. – Brad Bird Sep 13 '13 at 09:53
1

Indeed, although "as of yet" is no longer accurate - IE already supports it beginning from version 9, which has been out for a while. Also, if a question is asking specifically about CSS3 selectors it's usually safe to assume that IE support is irrelevant. Many of the selectors mentioned in the question don't work on IE < 9 either. – BoltClock Sep 13 '13 at 10:22
Agreed. Always seem to forget people are still using IE8 and below. Such a sad, sad world. – Brad Bird Sep 16 '13 at 11:44

score 0 · Answer 2 · answered Nov 08 '12 at 17:01

you can do this in following way

css

.link td {
    background-color:#066;
}
tr.link:last-child td{
    background-color: lime;
}

html

<table width="200" border="1"><tbody>
  <tr>
    <td align="center" valign="middle">1</td>
  </tr>
  <tr class="link">
    <td align="center" valign="middle">2 with Link Class</td>
  </tr>
  <tr>
    <td align="center" valign="middle">3</td>
  </tr>
  <tr class="link">
    <td align="center" valign="middle">4 with Link Class</td>
  </tr>
  <tr>
    <td align="center" valign="middle">5</td>
  </tr>
  <tr class="link">
    <td align="center" valign="middle">6 with Link Class</td>
  </tr>
</tbody></table>

check the jsFiddle File

score 0 · Accepted Answer · answered Nov 08 '12 at 17:03

0

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

answered Nov 08 '12 at 17:03

Justin

6,373
9
46
72

You could possibly do this with a *jQuery selector* though: `tr.ListRow:last` - unless you have multiple `tbody` or `thead` or `tfoot` elements in which case it gets a little more complicated. – BoltClock Nov 08 '12 at 17:06

Selecting all rows but the last of class with CSS3

3 Answers3