I've been utilizing CSS for various tasks, however, there is a particular situation where it doesn't seem to function correctly.
My goal is to create a list similar to a spreadsheet, with each line alternating between light grey and slightly darker grey colors.
https://i.sstatic.net/Zoge1.png
<style>
.spreadsheet {
display: grid;
grid-auto-flow: row;
}
.spreadsheet > div {
padding: 0.5rem;
}
.spreadsheet > :first-of-type {
border-radius: 1rem 1rem 0 0;
}
.spreadsheet > :only-of-type {
border-radius: 1rem;
}
.spreadsheet > :last-of-type {
border-radius: 0 0 1rem 1rem;
}
.spreadsheet > :nth-of-type(odd) {
background-color: #fafafa
}
.spreadsheet > :nth-of-type(even) {
background-color: #eaeaea
}
</style>
<div class="spreadsheet">
<div>Line 1</div>
<div>Line 2</div>
<div>Line 3</div>
<div>Line 4</div>
<div>Line 5</div>
<div>Line 6</div>
<div>Line 7</div>
<div>Line 8</div>
<div>Line 9</div>
</div>
All of the mentioned above works as expected. However, here's my concern in this specific context... I am using JavaScript to modify the classes of certain lines based on a filter. Essentially, I want to change the display property of filtered out lines to none, while maintaining the same alternating pattern of colors as before. Additionally, the first and last lines should still have rounded borders.
https://i.sstatic.net/hm9bp.png
<style>
.spreadsheet {
display: grid;
grid-auto-flow: row;
}
.spreadsheet > div {
padding: 0.5rem;
}
.spreadsheet > :not(.hidden):first-of-type {
border-radius: 1rem 1rem 0 0;
}
.spreadsheet > :not(.hidden):only-of-type {
border-radius: 1rem;
}
.spreadsheet > :not(.hidden):last-of-type {
border-radius: 0 0 1rem 1rem;
}
.spreadsheet > :not(.hidden):nth-of-type(odd) {
background-color: #fafafa
}
.spreadsheet > :not(.hidden):nth-of-type(even) {
background-color: #eaeaea
}
.hidden {
display: none;
}
</style>
<div class="spreadsheet">
<div class="hidden">Line 1</div>
<div>Line 2</div>
<div class="hidden">Line 3</div>
<div class="hidden">Line 4</div>
<div>Line 5</div>
<div>Line 6</div>
<div>Line 7</div>
<div class="hidden">Line 8</div>
<div>Line 9</div>
</div>
You'll observe that Line 1 is now set to hidden, so logically, Line 2 should inherit the background-color of #fafafa and possess a border-radius of 1rem 1rem 0 0. Despite this, it does not reflect these styles, especially when visually adjacent to similarly colored lines.
Any suggestions on how to achieve the desired outcome?