Select table rows before <th> with CSS 3 selectors

<table>
    <tr>
        <td>foo bar foo bar foo bar</td>
    </tr>
    <tr>
        <td>foo bar foo bar foo bar<开发者_如何学运维;/td>
    </tr>
    <tr>
        <td>select me</td>
    </tr>
    <tr>
        <th>c1</th>
    </tr>
    <tr>
        <td>foo bar foo bar foo bar</td>
    </tr>
    <tr>
        <td>foo bar foo bar foo bar</td>
    </tr>
    <tr>
        <td>select me</td>
    </tr>
    <tr>
        <th>c1</th>
    </tr>
</table>

<style>
    table { background: lightblue; width: 100%; border: 1px solid green }
    th { text-align: left; background: #fff }
</style>

Is it possible to select the "select me" table rows with CSS 3 somehow …?

I don't believe this is possible in CSS with your current layout. With a bit of tweaking to your markup though the problem becomes easier. Generally, if you are trying to do something particularly difficult with CSS, it's a clue that your markup might not be descriptive enough.

Consider for example if you were to use a footer row:

<table> 
    <tbody>
        <tr><td>foo bar foo bar foo bar</td></tr>
        <tr><td>foo bar foo bar foo bar</td></tr>
        <tr><td>select me</td></tr>
    </tbody>
    <tfoot>
        <tr><td>c1</th></td>
    </tfoot>    
</table>

This would make your markup more semantic in style, and you could use the last-child CSS3 selector:

tbody tr:last-child { color: Lime; }

Note that it is not valid html to have multiple <thead> or <tfoot> sections in a single table, so you would probably want nested tables to seperate your sections.

There is an excellent artice on CSS3 pseudo-selectors here.

Be aware though that older versions of IE might not support all pseudo-selectors.