Выбор четных строк определенного класса CSS

Question

Я пытаюсь выбрать четные строки таблицы определенного класса.

Итак, таблица выглядит так:

Absolute row 1 -- virtual row 1 of class a
Absolute row 2 -- virtual row 2 of class a (should be matched by css selector)
Absolute row 3 -- virtual *row 1* of class b
Absolute row 4 -- virtual row 3 of class a
Absolute row 5 -- virtual row 4 of class a (should be matched by css selector)

Я пытался использовать этот селектор:

.table-result tbody tr.include:nth-child(even) {background-color: #eeeeee;}

но он все еще учитывает tr с другим классом

Есть ли способ обойти это?Без необходимости прибегать к таблицам внутри таблиц?

HTML:

    <table class="ui-widget ui-widget-content table-result" id="adspaceresult">
        <thead>
            <tr class="ui-widget-header">
                <th>Type</th>

                <th>Info</th>

                <th>Average</th>

                <th>Bid</th>

                <th>Graph</th>
            </tr>

        </thead>

        <tbody id="adrbody">
            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="2" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>77</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>

            <tr>
                <td colspan="5">Why hello there!</td>
            </tr>

            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="3" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>748102</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>

            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="5" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>226</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>

            <tr class="include">
                <td><button data-adtype="1" data-adspaceid="6" class="resultbutton ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Micro Bar<br>
                88x31</span></button></td>

                <td></td>

                <td>6003</td>

                <td>Bid</td>

                <td>Graph</td>
            </tr>
        </tbody>
    </table>

Не должно учитываться значение tr, содержащее сообщение "почему привет".

Answer 1

Может не быть, если у вас ограниченное количество строк, но я бы не советовал использовать его

table .b, table .b~.b~.b, ... {background:white;}
table .b~.b, table .b~.b~.b~.b, ...{background:blue;}

пример http://jsbin.com/exuzex/

Answer 2

выберите строки по имени класса и выберите альтернативный элемент

var list = $(".include")
for (i=0;i<list.length-1;i++)
 {
 if (i%2 == 0){
  // do what you want
 }
}