CSS nth-chlld that works with only visible elements? [duplicate] - html

Question

This question already has answers here:
Select odd even child excluding the hidden child
(9 answers)
Closed 5 months ago.
I get that :nth-child is actually checking "children" vs "visible children" but is there a selector that would work with visible children?
Imagine I have table, I make odd rows a different color
I have a search filter that hides rows that don't match the search. Now when I search the rows are no longer alternating colors.
Of course I can go add/remove classes to every element which I'm basically doing already to hide/show them but I thought I'd ask if there was a CSS way to do it.
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

There is no selector but if you are open to a specific solution for this case then you can rely on gradient like below:
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 */
);
}
<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>