4

I'm trying to "zebra" color my table rows (odd = dark, even = light). However, because of my application, where the user is able to hide rows using selectors, it won't have the zebra effect because of the pseudo selectors selecting everything, and not based on what's "visible".

This is nothing new, and it's been discussed many times before:

Select odd even child excluding the hidden child

Zebra striping a table with hidden rows using CSS3?

In the same table, I'm using CSS's "count" feature, to visibly display row numbers for each row, and THESE are only applied on visible rows (discards rows with display:none)

table {
  width: 100%;
  background: white;
  counter-reset: rowNumber;
}

tr > td {counter-increment: rowNumber;}
tr td::before {
 content: counter(rowNumber);
 color: blue;
}

tr:nth-child(even) {
  background: red;
}
<table>
 <tr>
  <td></td>
 </tr>
 <tr>
  <td></td>
 </tr>
 <tr>
  <td></td>
 </tr>
 <tr>
  <td></td>
 </tr>
 <tr>
  <td></td>
 </tr>
 <tr style="display:none;">
  <td></td>
 </tr>
  <tr>
  <td></td>
 </tr>
  <tr>
  <td></td>
 </tr>
  <tr style="display:none;">
  <td></td>
 </tr>
  <tr>
  <td></td>
 </tr>
</table>

https://jsfiddle.net/cr6yo00w/1/

My question is (haven't seen this asked anywhere):

Is there a way to combine the two and zebra-color my table this way? Is it possible to extract the even/odd from the count?

EDIT: This was flagged as dupe -- As I've already stated myself, the odd/even selector has been discussed before. My question specifically relates to a possible way of combining odd/even selector WITH the CSS rowNumber count.

Community
  • 1
  • 1
Trace DeCoy
  • 649
  • 6
  • 16
  • Possible duplicate of [Hide/show TRs in a table keeping zebra striping](http://stackoverflow.com/questions/11351302/hide-show-trs-in-a-table-keeping-zebra-striping) – Asons Apr 21 '17 at 15:11
  • Maybe the answers to this question : [Select odd even child excluding the hidden child](https://stackoverflow.com/questions/26057925/select-odd-even-child-excluding-the-hidden-child) could help you. – Anonymous Aug 04 '21 at 15:17

0 Answers0