CSS nth-chlld ne fonctionne que sur les éléments visibles ?

Question

Je sais que :nth-child vérifie en fait « enfants » par rapport aux « enfants visibles », mais existe-t-il un sélecteur qui gère les enfants visibles ?

Supposons que j'ai un tableau et que je définis les lignes impaires sur des couleurs différentes

J'ai un filtre de recherche qui masque les lignes qui ne correspondent pas à la recherche. Désormais, lorsque je recherche, les lignes n'alternent plus les couleurs.

Bien sûr, je peux ajouter/supprimer des classes à chaque élément, ce que je fais déjà pour les masquer/afficher, mais j'ai pensé demander s'il existe un moyen CSS de le faire.

const searchElem = document.querySelector('input');
const tableElem = document.querySelector('table');

function search() {
  const str = searchElem.value.toLowerCase();
  const rows = tableElem.querySelectorAll('tr');

  rows.forEach(function(row){
    const text = row.textContent.toLowerCase();
    if (str.length && !text.includes(str)) {
      row.classList.add('hide');
    } else {
      row.classList.remove('hide');
    }
  });
}

searchElem.addEventListener('keyup', search);

tr {
  background-color: #CDF;
}

tbody>tr:nth-child(odd) {
  background-color: #DEF;
}

thead>tr {
  background-color: lightgreen;
}

.hide {
  display: none;
}

<input type="search" placeholder="search">
<table>
  <thead>
    <tr><td>Name</td><td>Amount</td></tr>
  </thead>
  <tbody>
    <tr><td>Apple</td><td>220</td></tr>
    <tr><td>Watermelon</td><td>465</td></tr>
    <tr><td>Orange</td><td>94</td></tr>
    <tr><td>Pear</td><td>567</td></tr>
    <tr><td>Cherry</td><td>483</td></tr>
    <tr><td>Strawberry</td><td>246</td></tr>
    <tr><td>Nectarine</td><td>558</td></tr>
    <tr><td>Grape</td><td>535</td></tr>
    <tr><td>Mango</td><td>450</td></tr>
    <tr><td>Blueberry</td><td>911</td></tr>
    <tr><td>Pomegranate</td><td>386</td></tr>
    <tr><td>Carambola</td><td>351</td></tr>
    <tr><td>Plum</td><td>607</td></tr>
    <tr><td>Banana</td><td>292</td></tr>
    <tr><td>Raspberry</td><td>912</td></tr>
    <tr><td>Mandarin</td><td>456</td></tr>
    <tr><td>Jackfruit</td><td>976</td></tr>
    <tr><td>Papaya</td><td>200</td></tr>
    <tr><td>Kiwi</td><td>217</td></tr>
    <tr><td>Pineapple</td><td>710</td></tr>
    <tr><td>Lime</td><td>983</td></tr>
    <tr><td>Lemon</td><td>960</td></tr>
    <tr><td>Apricot</td><td>647</td></tr>
    <tr><td>Grapefruit</td><td>861</td></tr>
    <tr><td>Melon</td><td>226</td></tr>
    <tr><td>Coconut</td><td>868</td></tr>
    <tr><td>Avocado</td><td>385</td></tr>
    <tr><td>Peach</td><td>419</td></tr>
  </tbody>
</table>

Answer 1

Il n'y a pas de sélecteur, mais si vous êtes prêt à accepter une solution spécifique pour ce cas, alors vous pouvez vous appuyer sur un dégradé comme celui-ci :

const searchElem = document.querySelector('input');
const tableElem = document.querySelector('table');

function search() {
  const str = searchElem.value.toLowerCase();
  const rows = tableElem.querySelectorAll('tr');

  rows.forEach(function(row){
    const text = row.textContent.toLowerCase();
    if (str.length && !text.includes(str)) {
      row.classList.add('hide');
    } else {
      row.classList.remove('hide');
    }
  });
}

searchElem.addEventListener('keyup', search);

thead>tr {
  background-color: lightgreen;
}

.hide {
  display: none;
}

table {
  position:relative; /* relative to all the table */
  z-index: 0;
}
td {
  line-height: 1.2em; /* the height */
  clip-path: inset(0); /* clip the pseudo element to td */
}
tbody td:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(
      #CDF  0 calc(1.2em + 4px), /* height   + 2*border-spacing */
      #DEF  0 calc(2.4em + 8px)  /* 2*height + 4*border-spacing */
    ); 
}

Name	Amount
Apple	220
Watermelon	465
Orange	94
Pear	567
Cherry	483
Strawberry	246
Nectarine	558
Grape	535
Mango	450
Blueberry	911
Pomegranate	386
Carambola	351
Plum	607
Banana	292
Raspberry	912
Mandarin	456
Jackfruit	976
Papaya	200
Kiwi	217
Pineapple	710
Lime	983
Lemon	960
Apricot	647
Grapefruit	861
Melon	226
Coconut	868
Avocado	385
Peach	419