Выделите строки таблицы до <th>с помощью селекторов CSS 3

Question

<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>

Можно ли каким-то образом выбрать строки таблицы "выберите меня" с помощью CSS 3 ...?

Answer 1

Я не верю, что это возможно в CSS с вашим текущим макетом. С небольшой настройкой разметки, хотя проблема становится проще. Как правило, если вы пытаетесь сделать что-то особенно сложное с помощью CSS, это подсказка, что ваша разметка может быть недостаточно описательной.

Рассмотрим, например, если вы должны использовать строку нижнего колонтитула:

<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>

Это сделает вашу разметку более семантической по стилю, и вы можете использовать last-child CSS3 селектор:

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

Обратите внимание, что недопустимо, чтобы html имел несколько <thead> или <tfoot> разделов в одной таблице, поэтому вы, вероятно, захотите, чтобы вложенные таблицы разделяли ваши разделы.

Существует превосходная статья о псевдоселекторах CSS3 здесь .

Имейте в виду, что более старые версии IE могут не поддерживать все псевдоселекторы.