CSS: помогите написать selector черезстрочной подсветки без учета определенного класса

Question

[dnv777]

Нужно сделать через строчную подсветку, но игнорировать(перескакивать) класс .space
В следующем примере нужно подсветить 2 и 5ю строку(если при подсчете проигнорировать .space, 5я строка становится 4й-четной)
1.tr
2.tr
3.tr.space
4.tr
5.tr

делаю так
.grid>tbody>tr:not(.space):nth-child(even){background-color:#E6E0C5 !important}

однако nth-child считается от родителя игнорируя другие селекторы(в моем случае :not(.space) )
как можно изменить селектор, чтобы подсчет четных шел без учета .space?

---

конечно можно высчитывать на сервере, и если не найду решения так и сделаю. Однако хотелось бы узнать реально ли это сделать на CSS?

Answer 1

[avrelian]

Да. Это сделать реально.

Но решение лишено какого-либо практического смысла, поскольку для надежной работы для каждой строки таблицы, в которой может появиться класс space, в css-файл необходимо будет добавить два селектора. Вот рабочий пример.

Вот стили для первых 3-х строк:

tr:not(.space):nth-child(even) { background-color:#E6E0C5; }
tr:not(.space):nth-child(odd) { background-color:#FFF; }

.space
  ~tr:not(.space):nth-child(odd) { background-color:#E6E0C5; }
.space
  ~tr:not(.space):nth-child(even) { background-color:#FFF; }

.space~.space
  ~tr:not(.space):nth-child(even) { background-color:#E6E0C5; }
.space~.space
  ~tr:not(.space):nth-child(odd) { background-color:#FFF; }

Comments

[dnv777]

действительно, работает! по поводу практического применения, может оно и действительно муторно
но для расширения кругозора, и изучения возможностей css, очень интересное решение!

Answer 2

[Stdit]

Насколько мне известно, селектор nth-child выбирает только по номеру потомка. Селектор nth-of-type тоже не годится, потому что нечем заменить tr. Если эта задача связана с формированием секций в таблице, то выходом может быть использование для каждой своего tbody:

<tbody>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
</tbody>
<tbody>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
</tbody>

Конечно, такую таблицу немного сложнее генерировать, но всё же я думаю лучше, чем писать class=«odd», class=«even» в каждой строке, к тому же это не приведёт к искажениям после динамического удаления или добавления строк в секцию.

Comments

[Stdit]

И есть еще недостаток: в этом случае следующая секция не будет помнить, на каком стиле закончилась предыдущая.

[dnv777]

ну если с отдельными tbody, тогда селекторы вообще теряют смысл, т.к. tbody все равно придется делать на сервере, так уж лучше там и класс прописывать.
в общем я так и сделал, в связи с тем что правила походу еще усложнились.

но все равно интересно есть ли какой-то css хак для данной ситуации :)