CSS nth-chlld hanya berfungsi pada elemen yang kelihatan?

Question

Saya tahu :nth-child sebenarnya sedang menyemak "kanak-kanak" vs "kanak-kanak kelihatan", tetapi adakah terdapat pemilih yang mengendalikan kanak-kanak yang kelihatan?

Andaikan saya mempunyai meja dan saya menetapkan baris ganjil kepada warna yang berbeza

Saya mempunyai penapis carian yang menyembunyikan baris yang tidak sepadan dengan carian. Sekarang apabila saya mencari, baris tidak lagi bertukar warna.

Sudah tentu saya boleh menambah/mengalih keluar kelas pada setiap elemen, yang pada asasnya saya sudah lakukan untuk menyembunyikan/menunjukkannya, tetapi saya fikir saya akan bertanya sama ada terdapat cara CSS untuk melakukan ini.

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

Tiada pemilih, tetapi jika anda bersedia menerima penyelesaian khusus untuk kes ini, maka anda boleh bergantung pada kecerunan seperti ini:

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