1

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.

4

3 に答える 3

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?

于 2012-11-08T16:57:55.607 に答える
0

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

于 2012-11-08T17:01:02.443 に答える
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");
}
于 2012-11-08T17:03:53.907 に答える