Question

Firstly, I have no control over the markup, I am merely styling this.

I have a table with a series of rows, some rows have a class in consecutive order. I’ve been able to select the first element of the series but can’t manage to select the last.

Any ideas?

Here is an example:

<table>
    <tr class="parent">
        <td></td>
    </tr>
    <tr class="parent">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="parent">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="child">
        <td></td>
    </tr>
    <tr class="parent">
        <td></td>
    </tr>
</table>

the css I have for selecting the first element of each child series is:

table tr.parent + tr.child

I cannot use jQuery!!!! this has to be pure CSS!

Answer 1

Use the :last-child selector. Example:

table tr:last-child

This will select every tr which is the last element in its parent; in this case, the last tr in the table. More about it: https://developer.mozilla.org/en-US/docs/CSS/:last-child

The + is the adjacent child selector, and in your example will select any tr.parent which has tr.parent as a sibling immediately before it. More about it: https://developer.mozilla.org/en-US/docs/CSS/Adjacent_sibling_selectors