Zebra lines overlooking unseen details

Question

Zebra lines overlooking unseen details

Imagine having a table where rows can be dynamically assigned classes such as .hidden, which hide those rows using CSS. The rows are styled with alternating colors, like this:

tr:nth-child(even) {
    background-color: $light-grey;
}

But here's the catch - I want every even row that is not hidden to still have shading. This means hidden rows should not be included when applying the :nth-child(even) rule in order to maintain a consistent pattern. I tried the following code but it didn't achieve the desired result.

tr:not(.hidden):nth-child(even) {
    background-color: $light-grey;
}

The issue is that :nth-child() refers to the original row indices, rather than considering the selection scope specified by tr:not(.hidden). It's like the two rules are stacked on top of each other without interacting properly.

Is there a concept similar to :nth-of-scope/selection() (or maybe just :nth()) in CSS? Are there any alternatives or workarounds available?

Or do I need to turn to Javascript for help?

(Just to clarify, I also have the option of using jQuery)

javascript jquery css css-selectors

Answer 1

Answer №1

If you're looking to hide elements in the DOM using CSS, simply adding properties like display:none or visibility:hidden won't do the trick.

Instead, you'll need a bit of JavaScript to achieve this effect after the page has loaded. Check out an example here:

var trs = document.getElementsByTagName("tr"), // Choose the specific ones you want
    count = 0; // Counter for visible elements

for(var i = 0; i < trs.length; i++) {    
    if(!trs[i].classList.contains("hidden") && (count++)%2 == 0) { // Apply style to odd elements
        trs[i].style.background = "black";
    } else if(!trs[i].classList.contains("hidden")) { // Apply style to even elements
        trs[i].style.background = "lightgrey";
    }
}

Answer 2

If you're looking to hide elements in the DOM using CSS, simply adding properties like display:none or visibility:hidden won't do the trick.

Instead, you'll need a bit of JavaScript to achieve this effect after the page has loaded. Check out an example here:

var trs = document.getElementsByTagName("tr"), // Choose the specific ones you want
    count = 0; // Counter for visible elements

for(var i = 0; i < trs.length; i++) {    
    if(!trs[i].classList.contains("hidden") && (count++)%2 == 0) { // Apply style to odd elements
        trs[i].style.background = "black";
    } else if(!trs[i].classList.contains("hidden")) { // Apply style to even elements
        trs[i].style.background = "lightgrey";
    }
}

Answer 3

Answer №2

Discovering the simplicity of jQuery compared to CSS hacking:

rows = $('table tbody tr');
rows.find('tr:visible:odd').css('background-color', '#f7f7f7');

Including styles for both even and odd rows:

rows.find('tr:visible').each(function(i) {
    if (i%2) {
        $(this).css('background', '#f7f7f7');
    } else {
        $(this).css('background', 'none');
    };
});

I admit, I answered my own question—should have mentioned my use of jQuery!

Hoping that :visible and :even become part of the official CSS standard soon.

Answer 4

Discovering the simplicity of jQuery compared to CSS hacking:

rows = $('table tbody tr');
rows.find('tr:visible:odd').css('background-color', '#f7f7f7');

Including styles for both even and odd rows:

rows.find('tr:visible').each(function(i) {
    if (i%2) {
        $(this).css('background', '#f7f7f7');
    } else {
        $(this).css('background', 'none');
    };
});

I admit, I answered my own question—should have mentioned my use of jQuery!

Hoping that :visible and :even become part of the official CSS standard soon.

Answer 5

Answer №3

To resolve the issue, I successfully found a solution by inserting an additional <tr> element with the CSS property display: none; applied. This approach worked effectively in situations where a group of hidden rows contained an odd number of elements. While it may not be ideal for all scenarios, it proved to be a reliable method especially when constructing expanding tables using multiple rows.

Answer 6

To resolve the issue, I successfully found a solution by inserting an additional <tr> element with the CSS property display: none; applied. This approach worked effectively in situations where a group of hidden rows contained an odd number of elements. While it may not be ideal for all scenarios, it proved to be a reliable method especially when constructing expanding tables using multiple rows.

Answer 7

Answer №4

It seems that achieving this purely with CSS might be a challenge. Even when using display:none; and visibility:hidden;, the table background color appears to be affected because the items still exist in the DOM. You could consider utilizing JQuery's remove() function for a cleaner solution. For a demonstration, check out my straightforward example on this jsfiddle link.

Answer 8

It seems that achieving this purely with CSS might be a challenge. Even when using display:none; and visibility:hidden;, the table background color appears to be affected because the items still exist in the DOM. You could consider utilizing JQuery's remove() function for a cleaner solution. For a demonstration, check out my straightforward example on this jsfiddle link.

Answer 9

Answer №5

A clever solution using only CSS (no JavaScript) is as follows:

To achieve the desired effect, hide a row using a different tag instead of a class. In this example, the "ul/li" tags are replaced with the "del" tag for hiding purposes.

.list div:nth-of-type(odd) { background: ghostwhite; }
.list del { display: none; }

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <del>4</del>
  <div>5</div>
  <del>6</del>
  <div>7</div>
</div>

Answer 10

A clever solution using only CSS (no JavaScript) is as follows:

To achieve the desired effect, hide a row using a different tag instead of a class. In this example, the "ul/li" tags are replaced with the "del" tag for hiding purposes.

.list div:nth-of-type(odd) { background: ghostwhite; }
.list del { display: none; }

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <del>4</del>
  <div>5</div>
  <del>6</del>
  <div>7</div>
</div>

Zebra lines overlooking unseen details

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Having difficulty transferring data from a JSON file on a different domain to a variable using Ajax

Is there a way for me to view the contents within the box?

suggestions automatically populating in a text box as you type

Sending a directive as an argument to a parent directive function

How can you ensure that text in a container automatically moves to a new line and causes the container to expand downward if necessary, when

Determining the distance between points in an STL file with three.js

Convert individual packages within the node_modules directory to ES5 syntax

The jQuery code is failing to run as intended

Problem with single-table layout in DynamoDB and constraints on query parameters

"Exploring the world of remote_form_tag in Rails with jrails

How can I programmatically click the send button on WhatsApp using Selenium, either through xpath or css selectors in vb.net

After submitting a post, the click event of a button in IE 10 using jQuery is not

How to convert deeply nested object structures containing arrays in JavaScript

Utilizing the text field feature within Twitter Bootstrap 3.0 in-line styling

Issue with AjaxComplete function failing to work

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

The rendering of the .Net MVC DropDownList is not displayed properly when it is first set to be hidden

NextJs not processing Bootstrap form submissions

Conceal navigation buttons on the first and last pages of the slider

Transmit information to the server via an AJAX request