CSS nth-chid selector without hidden chilld node

Question

tr.whois:nth-child(even) {
  background-color: black;
}

.hide {
  display: none;
}

<tr class="whois">row 1</tr>
<tr class="whois">row 2</tr>
<tr class="hide">row 3</tr>
<tr class="whois">row 4</tr>
<tr class="whois">row 5</tr>

here visible row (1,2,4,5) and nth-chid(even) makes black (1,3,5)-

enter image description here

But I need this-

enter image description here

https://stackoverflow.com/questions/32355054/how-to-get-nth-child-selector-to-skip-hidden-divs — Shashank Agrawal, Jun 06 '20 at 06:39
the answer you accepted doesn't work in all the situations: https://jsfiddle.net/yh82k1qv/ — Temani Afif, Jun 06 '20 at 08:28

score 1 · Accepted Answer · answered Jun 06 '20 at 05:17

You can do something like this:

Since you have hide element as well so this is the place where you have to use ~(negate) for odd and even The code is pretty straight forward to understand let me know if you need explaination.

.whois {
  background: green;
  color: white;
}

.whois:nth-child(even) {
  background: black;
  color: white;
}

.whois.hide {
  display: none;
}

.whois.hide~.whois:nth-child(odd) {
  background: black;
  color: white;
}

.whois.hide~.whois:nth-child(even) {
  background: green;
  color: white;
}

<table>
  <tr class="whois">
    <td>row 1</td>
  </tr>
  <tr class="whois">
    <td>row 2</td>
  </tr>
  <tr class="whois hide">
    <td>row 3</td>
  </tr>
  <tr class="whois">
    <td>row 4</td>
  </tr>
  <tr class="whois">
    <td>row 5</td>
  </tr>
</table>

this doesn't work: https://jsfiddle.net/yh82k1qv/ it only do for some particular case — Temani Afif, Jun 06 '20 at 08:28
Hmmm I didn't consider this! considering OP data I was able to fix it! do you have any inputs ? — Manjuboyz, Jun 06 '20 at 08:32

CSS nth-chid selector without hidden chilld node

1 Answers1